More Bottle

I forgot to mention before that I looked at the example where multiple routes are used

I think it's cool how whatever you put in, it will replace "{{name}}" but if nothing is put in it will put stranger. I just don't quite understand the code because I don't understand why it defaults to stranger but is somehow overwritten if a different route is put in and I also don't see why you need the "name=name" part.
I also looked at a login form which talked about Get requests and Post requests which seems kind of complicated and an Error request which seems pretty simple.

Bottle

On Thursday and Friday I was working on more bottle. I didn't make a lot of progress at first because it just looked weird to me for some reason but now I think I understand it. I know the difference between dynamic and static routes now and I just started reading about filters which don't seem too complicated. The only filter I don't understand is the ":re" but the rest seem simple, like ":int" which I assume only allows a route to be a number.

SQL Query Review

For future reference, the way sqlite reads an sql file is with ".read". In this case I used ".read moviedb.sql" and then ".read moviedbinsert.sql" for the data. I reviewed sql queries and I messed around with selecting certain data.

SELECT Fname, Likes.PersonID, Title, Likes.MovieID 
FROM Person, Likes, Movies 
WHERE Fname = "Rusty" 
AND Person.PersonID = Likes.PersonID 
AND Movies.MovieID = Likes.MovieID;

Like this would only show the person's first name, then their ID, and the title and ID of 

the movie they like. You can try more complicated things with a lot of data using "or" or the "like"

statement which finds data restricted to certain letters or greater than or less than a certain

number. 

SELECT Fname, Likes.PersonID, Title, Likes.MovieID

FROM Person, Likes, Movies

WHERE Lname LIKE "%o"

AND Person.PersonID = Likes.PersonID

AND Movies.MovieID = Likes.MovieID;

This displayed a person's first name, their ID, along with the name and ID of the movie they 

liked but it sorted it by last names only ending in "o". 

I think I understand SQL pretty well again, I think I just need to learn how to apply it better though,

like when using it for a form. 

SQL Review

I started reviewing and it's all pretty easy to understand except for a few things I had to review like "referencing". I kind of forgot how to import the files though and I don't think I ever documented that so I have to figure that out...

Movie Database

• This file is for the actual creation of the database
• Primary keys are unique values
• When a value is referenced it is simply a value being supplied from another table

Movie Database Data

• This was the actual data for the database, it's all very straightforward

Bottle

I set up bottle and I started reading the tutorial. I made the Hello World example which you saw on Jack's computer. I kept rereading a lot of the tutorial, like I didn't understand what routes are. I kind of understand some of the concepts but a lot of it I don't fully get.

Media Queries

On Thursday and Friday I worked on media queries which turned out to be more annoying than expected. On Friday, Sam found out that my style was not being applied even without the media query which is obviously a problem. I applied a text color to <h1> which is what I should of done in the beginning. I don't know why the background color was not changing though but I should be able to do more with the media queries now. Anyway, right now the list is set to green all the time and black when the device width is more than 480px but I also got orientation working so that when the phone is landscape the text changes to pink.

Responsive Layout

There are multiple ways to implement responsive layout but it seems like the best way is through media queries like you mentioned. I read about them on w3schools and jquerymobile. I didn't realize that you could also make portrait and landscape modes for a web page. I don't really know how to use media queries to change a web page from a desktop site to a mobile site though. I'll try to apply it anyway, like adding a navbar or even just changing the background color depending on the screen size.

Content Pages

I'm making pages for my list but I don't really know how to style it. You can see what I did for one of the items here. It's not that interesting but I don't really know any other way to style the page. I also noticed a couple of problems with the web page. First of all, the items cannot be dragged on the phone and the dragging is inconsistent on the computer. Also, if all the items under a divider are removed, the divider disappears so I might just remove that feature and that way I can use thumbnails on the items.

List App

I put my list app on my website and I also cleaned up the code because it was really ugly and hard to read before. I added pages to all the list items although I don't really know what to put as content. I think I should also look at other data attributes like navbar. Anyway here is my list of stuff.

Lists

It seems like most content on phone apps are implemented using lists and I think I understand how to design these apps pretty well. I made another list app this time divided into 3 categories:fruits, movies, and vegetables. I still don't know why I can't use the drag and drop code with pictures those so this list currently contains no pictures, but I would like to somehow implement both in the future. I also tried to install a graphite theme but I didn't really know how to install it. Also, I found another really nice theme creator that is specifically made for jQuery mobile. My new list app also has more content when clicking on a list item such as clicking on "apple" would show more info. I'll put it on my website later with more content so that you can actually navigate it instead of looking at pictures.

Drag and Drop

I tried this tutorial today that was about dragging and dropping list elements. It seemed pretty short and simple because it just utilized a library called jQuery UI and something else called Touch Punch to simulate a mouse on phones, but at first my app was just loading constantly after adding the script source. I sort of fixed the problem because I realized that I had to update all the links to the latest stable versions because I have been using tutorials from different dates. So this tutorial used a version of jQuery UI which I think was not compatible with the version of jQuery I had. I fixed that and I was able to load my app but for some reason the thumbnail of the pictures I had in my list became full size but I was able to drag the items so I'm guessing it would work if I didn't have pictures but I'm not sure.

You can see that one picture is taking up a huge amount of space and the footer also changed color for some reason. There may be a better way to drag and drop stuff though because this tutorial is old.

Custom Themes

I found a tutorial on how to make custom themes so it's basically CSS but the styling is different because it seems like jQuery mobile uses a lot of gradients or glossy looking buttons and such. Luckily it's easy to make styles with online tools otherwise making things like gradients would be awful. There were also a lot of other helpful resources listed but I only looked at the gradient tool. I tried to make a custom list style but it wasn't working but I did manage to make a custom footer. Although, it was a little bigger than the original and the links weren't styled.

List App

I made my own list app like in the tutorial that I linked to before. It has a search bar and if you click on a list item it shows the picture in full screen. The toolbar at the bottom sort of works because the buttons are functional but there are no other pages like home. Also this link was useful because it talked about themes along with one that talked about custom icons for list items. You can also style the icons but I didn't get it working. This also seems like a useful link because it talked about useful piece of code when using jQuery Mobile. In the picture below you can see that I was able to style the list items individually, give custom icons like the star, and other stuff. But in most cases you would probably keep everything one style but you could use multiple dividers for different sections of pictures.

jQuery Mobile

I found a really nice beginner's tutorial for jQuery Mobile and it's really nice because it shows how a simple web page can be easily modified to look a lot better on mobile devices. I just realized that I think I have been trying to use jQuery Mobile in my Ubuntu apps when I hadn't even included jQuery Mobile as a source in my apps which explains why a lot of my apps were not being styled. I also like how this is being done on a website because I think I was having trouble with the UI.

Javascript

On Friday I continued to work on Javascript for an app that does something when pushed. I only made a few changes, one of which was that instead of console.log I used replaceWith. I actually did screw up the Javascript because I made a few changes and ran it in a web browser and it didn't work. I did fix it though and I think the problem was that I referenced the button incorrectly, so I guess I'm a bit rusty with my Javascript. Anyway, it should be easy to put it back in the Ubuntu SDK because I just have to add things like "UI" and initialize it. 

Javascript

Cordova
Javascript APIs that allow you to access the hardware on your device such as the camera, accelerometer, GPS, storage, etc, which isn't possible with Javascript alone.

I finally tried adding Javascript to an app, I noticed by default they don't use $(document).ready but instead they use window.onload. I guess either can be used though. I also tried to style my list again but I really can't seem to get it working. Anyway I made a quick app that has a button and when clicked it would display some text but it doesn't work.

$( document ).ready(function() { 
 var UI = new UbuntuUI(); 
 UI.init(); 
   
 UI.button('text').click(function () { 
  console.log('neat'); 
 }); 
});



I have a button with the id "text" but the app is working, I haven't really tested it so I don't know if the button is working or not or if the text is just not showing up.

Swiping and Toolbars

So the app is styled fairly well right now although I can't seem get any other styles working, but I'll try and add some javascript anyway. Like you suggested I looked at the meanings app for help and I took a look at both the javascript and html. Some of it looks familiar but a lot of it I also don't understand. It seems like they apply data roles to nearly every line yet I'm having trouble styling my list. I also cleaned up a lot of unnecessary code that was made when the project was first created. There is now a tool bar on the app which would allow a button to be placed for the lists to be deleted, there should also be small icons on the tool bar and I don't know if the text should be separated like that.

List

I finally managed to make progress on the list view I was making and I used this as a reference. I'm pretty confused right now because I can't seem to apply any CSS to anything and I was also unable to get any swatches working. It seems like my list was styled a lot when I barely did anything to it which is odd but I like the look of it.

Data Attributes

So I spent a lot of the class trying to get a border to simply work but anyway I started working on an app that allows a list to be deleted. I think I need to read up on data roles though because my lists are not working properly. I found a few links, one of which talked specifically about lists on mobile devices. It seems really weird and I think I have been implementing my lists wrong but this website has a lot of examples.

More Design

I changed the look of the app again, I really thought I had to center the content in the middle but I now realize that is probably unnecessary. The app now looks more like their examples of list items which are very pretty, each list item has this subtle line to separate each which I want to try and make. I'm currently using <h2> and <hr> but I'll replace the <hr> eventually. You can also read about jQuery Mobile Data Attributes here.

Ubuntu Font and Centering

I tried to center my list of answers today. I don't know why I had so much trouble with this and in the end I only centered the top left corner of the list so that needs to be fixed. I also tried to use the Ubuntu font which you can get off of Google fonts. I think I am importing the downloaded font wrong and I am assuming that you can't use the URL from google fonts to import because I am not using the font on a website. You can see the google font here and how they suggest to use it(like 30ish pt font for header and 12ish pt for content).

Question App

First of all if you ever make a new app you have to put in your name and your email in the maintainer field. I was actually unable to run my code at one point because I didn't have a valid maintainer name(I just had the default "MainterName" set) so I changed it to Aki Nicholakos <aki42197@gmail.com> and the error went away. I suppose this is required so that if you make your app public people can contact the creator for whatever reason.

This is the current design of my question. I think the questions need to be spaced out more and in the center because it would be uncomfortable for someone to stretch their finger to the far left corner. I need to mess around with the CSS quite a bit and in the picture the list had a small margin which removed some of the divider and the list items won't be ordered since it's a question.

Ubuntu App Design Guides

Design Tips

• One important tip when designing is to make the content the center of attention but allow the user to quickly access other features like checking the tool bar or header at the edges of the screen.
• Therefore users can swipe at the edges of a screen to view the header or toolbar, etc
• The scroll bar is hidden until used.
• Use bold sparingly, for strong emphasis of one or two words.
• Don’t use italics.
• Use underlining only for hyperlinks.

Core(Horizontal) & Full screen(Vertical)

• Core is like a landscape layout and it includes a header, like a page title, and a divider under it where the content goes
• Full screen is very similar to Core except it is like a portrait view and I don't think it usually includes a divider
• Both include a toolbar which can have up to 5 icons such as a deletion tool, camera, etc

Content Views

• Grid View: This type of layout divides the content into different sections kind of like graph paper and it takes up most of the screen. This is usually used for things like photo galleries where you have a bunch of thumbnails of all the photos you have taken.
• List View: A list view is what it sounds like where you have a list of content and the different listed items can be grouped and styled different so contacts tend to use a list view where you have different people under different categories like Recently Contacted or Favorites.
• Full screen View: This view is actually just the Full screen layout that I mentioned above and I suppose you can also use a Core layout. So if you have a Grid View to see your thumbnails you could click a thumbnail to display the whole picture in a Full screen View.

Deleting Stuff

• Swipe: Swiping can be used to delete items but only if they are in a list view because you can swipe the content to the side and it will go away. When swiping you sometimes have to specify whether you want to delete the content permanently or just remove it from the screen so you won't be notified of it anymore.
• Tool Bar Button: A tool bar button can be used to delete content but this is generally used if there is a lot of content or the view is full screen. 

Java Set Up 2

Not much to report really, Finn set up some plug ins and the last thing we have to do is set up Git hub. I'll start learning Java by next week though when I get access to my Nova account.

Java Set up

Finn set up Java JDK (Java Development Kit) and IntelliJ on my laptop and hopefully I can start observing Finn work tomorrow.

Tic Tac Toe

I realized my tic tac toe game doesn't actually work as well as I thought and right now there are a few problems.

• I'm having trouble making a reset button
• The score board does not work

I have ideas on how to fix all of them but I can't get them working although I did manage to fix another problem I was having right before class ended. Now players can't continue playing to prevent the outcome from changing.

Tic Tac Toe

I started working on adding a score to the game to keep track of how many times x or o has one and I feel like it would work for the most part if I could get select html elements more easily. I had given them id's but apparently you can only call an html element through its id with "document.getElementById" so I'll just try some other selectors next time.

Word Counter

I thought it would be neat to make some sort of small app such as a timer or word counter and I still don't quite understand how to manipulate the DOM. Currently, I have a form with a textarea input and a button that is simply linked to a function that returns the length of the textarea but I'm having trouble getting the function and the input to work together.

http://students.gctaa.net/~snicholakos/javascript/wordcounter.html

Processing.js and Tic Tac Toe

I looked at processing.js and they have a lot of really cool examples but their download link is currently broken. Also, Tic-Tac-Toe now works properly (as far as I know) after I changed the check for winner function to include a second for loop to fix the problem I was having. I could now start making the game look more interesting, for instance, it would be nice if I could display the winning combination like with a line crossing through the shapes.

Tic Tac Toe

I finally managed to get the tie working and the problem was that the tie would be determined too early so I added a counter. Essentially it just counts the turns now but it finally works! The only problem remaining is that when there are 3 x's or o's in a row anywhere in the array it will say there is a winner but I think I can fix it if I rewrite checkForWinner function a bit.

Tic Tac Toe Functions

Tic Tac Toe

I really have not made much progress on the tic tac toe tie but I did find a bug where the player wins when they shouldn't. Currently if someone puts an x or an o 3 times in a row anywhere within the array they win, so something like ",x,x,x, , ,o,o, " wins.

Tic Tac Toe Winner

• It will now say if someone has won in the bottom row
• It now shows who has one
• There were also a couple of bugs but I tested out all possible winning positions and everything seems in order
• I still haven't made an efficient way to determine ties

My project is tic tac toe

Tic Tac Toe Functions

I made a checkForWinner function that surprisingly works! I was stuck for awhile on one of the diagonal wins but the problem was that I had "(board[i+2] === board[i+4] && (board[i] === 'x' || board[i] === 'o'))" when the single i's should have been "i+2". Otherwise it kept saying there was a winner whenever a single x or o was placed on the top row.

Tic Tac Toe

I finished writing the winning conditions(which took way too long), now all I need to do is optimize it and specify who wins or if print if there is a tie. If I were to make a loop I think I would use .indexOf or maybe .inArray.
http://students.gctaa.net/~snicholakos/webgraphics/tactactoe_new.html

Tic Tac Toe

I finished all the winning conditions but I broke the game when I tried to make a condition when there is a tie so I'm guessing that may be the problem. I'm not sure if this code is correct:
(xoArray[0] === 'x' || xoArray[0] === 'o')&&(xoArray[1] === 'x' || xoArray[1] === 'o')
Unfortunately I ran out of time but I'll take another look at it tomorrow and if I get it working I will make the "You win" message better.

Tic Tac Toe

Here are some questions I have
Could you explain the nth-child and how you applied it to tr and td?
How does this line work exactly "xoClass = (xoClass === 'x') ? 'o' : 'x';"?
I think you explained both of these to me but I still don't quite understand.

jQuery

I finished up the jQuery lesson and here is a link to my moveme web page. Unfortunately I did not get any work done on my other projects because I was having a hard time with JavaScript but I should be able to next week.

JavaScript Cash Register

Here is the code for the cash register
http://students.gctaa.net/~snicholakos/javascript/register.js

JavaScript Objects II Notes

• Constructors are actually their own type of class
• A public method can return a private variable along with other private methods
• Use "var" in a class to make the variable private and "this" to make it public
•    this.age = age; (public)
     var bankBalance = 7500; (private)
• Inheritance is useful when 2 classes share similar properties
• "Child".prototype = new "Parent"()
• If you want a method to work with all the members of a class use "prototype"

• className.prototype.newMethod =
  
  function() {
  statements;
  };
  

• "Typeof" allows you to determine the type of a variable
• "hasOwnProperty" returns true or false whether or not an object has a certain property
• This is useful for if else statements
• "for in loops" are simplified for loops that look like this

• for (var properties in nyc){
      console.log(nyc[properties]);
  }

  • bracket notations can be used to print the values of an object

JavaScript

I started the lesson and finished about a third of it. The review was really nice and I have my notes in a separate post just because I want it all in one post and I should be able to post that tomorrow.

Tic Tac Toe

I fixed the positioning of the x's and o's but I still can't figure out how to prevent the x from changing to an o. I tried to put in a statement that would check but either it doesn't work or I am not putting it in the correct place.

if (!$(this).hasClass("o")) || (!$(this).hasClass("x")) {

Tic Tac Toe

Here is the newer version of my game
I would say that if I could just fix the toggle then it would be fully functional. Although, I could make it look nicer like by centering the images, making the grid bigger, etc.

JavaScript

Questions

1. What does the following expression evaluate to "var answer = (((3 * 90) === 270) || !(false && (!false)) || "bex".toUpperCase() === "BEX");"?
2. Write a switch statement that uses 2 cases and a default.
3. Create an object with 2 properties either using object literal notation or constructor notation.
4. Access any property of the object "dog" using either bracket notation or dot notation.
• var dog = {
    species: "greyhound",
    weight: 60,
    age: 4
  };
5.  Make a method for an object, "rectangle", to change its height.

• var rectangle = new Object();
  rectangle.height = 3;
  rectangle.width = 4;

Also, I tried to have the items in my to do list highlight when the cursor hovered over them but instead it highlighted the entire list. You can take a look at it but I will likely remove it later unless I can make it look better.

Tic Tac Toe

I got the game working for the most part but there are a couple of problems:

1. When a shape is put into the grid it hugs the border when I would like it to be a bit smaller than the spot it takes up. I also had to change the circle to a square otherwise the border of the table would wrap around the circle.
2. If you click on the green square when the red square is queued up it will replace the green square. 
• .circle{
      background-color:#00CC00;
      //border-radius: 100%;
      width:90px;
      height:90px;
  }
  .square{
      background-color:#FF0000;
      width:90px;
      height:90px;
• I noticed that whichever style is first is the one that will be replaced. I think both these things have something to do with CSS specificity but I don't quite know.

I forgot to do my JavaScript questions but I am committed to doing it next week!

jQuery

I added some more to the To Do list, you can see it for yourself here. The only problem I currently have with it is that there is an empty bullet point.

I started on the friends list, although I did not get a lot done, but I do have all of tomorrow to work on either that or the tictactoe game.

jQuery

I finished up the lesson and I added the to do list to my web page. I added a bit of CSS to it to make it look better but I will have to go back to it and add more later.
http://students.gctaa.net/~snicholakos/webgraphics/todo.html

JQuery

I tried out the toggleClick function but I wasn't able to get it working so I moved on to the lesson. I've finished most of the lesson and I'm hoping that by the end of it I may be able to fix my game.

This lesson mainly talked about messing with the html using JQuery

• $(document).ready(function() {
      $("#text").click(function() {
          $(this).addClass("highlighted")
      });
  });
• For example this function adds a class to text which adds CSS to it giving it a highlighted effect(removeClass does the opposite)
• $(document).ready(function () {
      $("body").append("<p>I'm a paragraph!</p>");
  });
• This simply adds a paragraph to the end of the body, alternatively prepend would put it at the start
• remove gets rid of an element completely while empty gets rid of its contents

JQuery

I thought it would be a good idea to work on your suggestions and I mostly completed your challenge for the vanish assignment. Originally I had tried to do something overly complicated and it didn't work but apparently there is a hidden selector which is really useful in this case. Anyway, if you click the button different squares fade in.
http://students.gctaa.net/~snicholakos/webgraphics/jquery_ex1.html

Also, I quickly looked at the JQuery zoo which was very useful and I found this function which may come in handy

$.fn.toggleClick = function() {
    var events = arguments;
    var iteration = 0;
          
    return $(this).click(function() {
        events[iteration].apply(this, arguments);
        iteration = (iteration + 1) % events.length;
    });
};

JavaScript

I finished up the lesson along with the address book, I have my code listed here

http://students.gctaa.net/~snicholakos/javascript/addbook.js

JavaScript Methods and Custom Constructors

• Like a function but used specifically with objects
• Defined like a function but you add the name after the object
• bob.setAge = function (newAge)
• Functions require parameters while methods do not
• "this" can refer to a specific object without having to write it in the method
• var setAge = function (newAge) {
    this.age = newAge;
  };

• Custom constructors work like this
• function Person(name,age) {
    this.name = name;
    this.age = age;
  }
• and can be called like this
• var bob = new Person("Bob Smith", 30);
• You can also have it so that there will be a value for all objects when making a custom constructor
• function Person(name,age) {
    this.name = name;
    this.age = age;
    this.species = "Homo Sapiens";
  }
• There is no parameter for species so Person will always be Homo Sapien
•  They can also come with methods
• function Rectangle(height, width) {
    this.height = height;
    this.width = width;
    this.calcArea = function() {
        return this.height * this.width;
    };
    this.calcPerimeter = function() {
        return this.height * 2 + this.width * 2
    }
  }

JavaScript

I finished up contact list which was due last week, here's the code
http://students.gctaa.net/~snicholakos/javascript/contacts.js

I also got around to finishing nearly half of the JavaScript lesson for this week. I don't think I need to write notes on objects because I already wrote some from the last lesson and there has been a lot of practice. I will post notes on methods and any finished projects later on, though.

JQuery

I finished the second codecademy section. I thought it would be fun to try and start making a game. I tried to make a tic tac toe game which I have here.
So, my plan was to have these spots where you could click(marked as blue squares) and as you click they get replaced with either a red or green object.

$(document).ready()
   $("div").toggle(function() {
       $(this).replaceWith($("div.square"));
   }, function() {
       $(this).replaceWith($("div.circle"));
   });

What I was hoping this code would do is replace the object that the mouse is clicked on with either the square or circle which would cycle. As far as I know, the toggle function works as .click and replace would obviously replace the object but it doesn't work.

api.jquery.com/toggle-event/
http://api.jquery.com/replacewith/

JQuery

I made a quick project from some of the stuff I learned so far, the button will make the blue square go away but clicking on the green square will allow the red one to reappear.

http://students.gctaa.net/~snicholakos/webgraphics/jquery_ex1.html

What I Learned About JavaScript Arrays and Objects

I finished the Choose your own Adventure, it technically works but I will post it on my website when I make it more interesting.

Arrays

• Arrays don't need to hold the same datatypes
• Arrays can be nested, you can have arrays in arrays
• Ex. myArray = [[true, false, 3, "three"], ["hello", 4], [0]]

Objects

•  
• you can create objects with nothing in them
• var me = new Object();
• you can add to objects

• myObj["name"] = "Charlie";
  myObj.name = "Charlie";

   
• similar to arrays they are formatted

• var myObj = {
      type: 'fancy',
      disposition: 'sunny'
  }; 

jQuery Animation

For my small project I made squares that increase in size as you mouse over them and when you move your mouse away from them they stop increasing in size. I would also like to make it so that you can decrease the size but I couldn't quite get that working.

http://students.gctaa.net/~snicholakos/webgraphics/rainbows.html

jQuery Lessons

• the ".ready()" function has something happen the second the page loads
• "document" refers to the html document itself
• "$()" is where jquery code goes
• "click" allows for something to happen when an object is clicked on
• "mouseenter" allows for something to happen when the mouse is placed over an object, while "mouseleave" is the opposite
• "animate" can manipulate an object
• "slidedown" does exactly what it sounds like, objects slide down
• "slow" can make an action slower

jQuery

I put the first two exercises into a web page
http://students.gctaa.net/~snicholakos/webgraphics/

It was pretty confusing at first and as codecademy said it all looked intimidating but now that I completed one exercise I think I can start doing the rest faster. The exercise itself isn't too hard but the info they give before each exercise is harder to understand, especially because there are three different tabs. I actually think javascript is easier to understand.

Javascript

• .toUpperCase() capitalizes all letters in a string
• .toLowerCase() does the opposite
• "and" is written as &&

• true && true;    // => true
  true && false;   // => false
  false && true;   // => false
  false && false;  // => false 

• "or" is ||

• true || true;     // => true
  true || false;    // => true
  false || true;    // => true
  false || false;   // => false 

• "not" is !

• !true;   // => false
  !false;  // => true

   

Javascript

I think I've finished everything for the week so I have moved on to the next lesson in codeacademy, I'll come back and edit my notes if needed.

• The switch statement is very useful, it's a substitute for else if and allows the user to preset as many cases as they like and if one of the options is chosen it will execute the code otherwise it will execute some default code.
• In code academy they have                                                                        var lunch = prompt("What do you want for lunch?","Type your lunch choice here");
  
  switch(lunch){
    case 'sandwich':
      console.log("Sure thing! One sandwich, coming up.");
      break;
    case 'soup':
      console.log("Got it! Tomato's my favorite.");
      break;                                                                                                       default:
      console.log("Huh! I'm not sure what " + lunch + " is. How does a sandwich sound?");                                                                                    From what it looks like the user is prompted the questions what they want for lunch and if they choose either sandwich or soup they will get a preset response otherwise they will get the last message because they did not choose any of the available options.

Inkscape

I finished up my snail thanks to Kenneth and I changed the viewbox on both my teapot and snail to only fit the picture. SVG is really fun and it feels nice to finish a project.

My projects can be seen here
http://students.gctaa.net/~snicholakos/webgraphics/

SVG and JS

I implemented my dragon slayer game into a web page.
http://students.gctaa.net/~snicholakos/javascript/dragon_demo.html

I also worked a bit on my teapot and snail, I managed to fix up my teapot using Inkscape so now the lid is perfect as far as I can see and I tried to make the fill on Gary the snail a bit more precise.
http://students.gctaa.net/~snicholakos/webgraphics/

SVG

I added the dictionary lists to my SVG portfolio and also added some color to both my SVG and JS portfolio to make both look a little better. I also sort of figured out a way to fix my teapot but it's not a very good solution.

Javascript and SVG

Here is a link to my code for search string
http://students.gctaa.net/~snicholakos/javascript/search_string2.js

and here is "Dragon Slayer"
http://students.gctaa.net/~snicholakos/javascript/dragon_slayer.js

I also edited my SVG path summary to include the difference between quadratic and cubic bezier curves

SVG For loops and Arrays

• For loops are code that cycles until the "for" statement is no longer true.
• It's formatted as
• for (var variable = #; i < #; increment) {
      code;
  }
• for (var i = 4; i < 24; i++) {
      console.log(i);
  }
• The for loop first looks at the variable and if it applies to the parameter after it then it will apply the increment to the variable and then run the code. It will continue to do this until the for loop is false. In other words, for the code above, the variable i is equal to 4 and as long as it is less than 24 it will increase by 1 and print its current value making the output 4-23
• arrays can store multiple values and its elements start with 0
• they are declared like
• var junkData = ["Eddie Murphy", 49, "peanuts", 31];
•                           [element 0]          [1]      [2]          [3]

I finished the "Search Text for Your Name" lesson, it was more challenging than the other lessons and sometimes I didn't really know what I was doing but I think I get for loops for the most part.
http://students.gctaa.net/~snicholakos/javascript/search_string.js

Inkscape Snail

My Inkscape project is a snail from the show "Spongebob", the only thing it is missing is a shell.

As for my teapot, I could not get any use out of Inkscape, if I filled my teapot lid it would not fill entirely but I was able to fix the teapot body using vim. The problem with the lid is that whenever I fill it, it fills the outside rather than the inside but I do have an idea of how to fix it.

Inkscape

• With the cursor tool, select a shape to
• move it by dragging, ctrl restricts you to vertical and horizontal movement
• scale it, ctrl keeps the width and height proportional
• clicking again allows you to rotate and skew the object
• to move something precisely you can use alt+arrow keys to move by one pixel
• Ctrl click to select and deselect objects in groups
• Page Up and Page Down move objects forwards or back in order
• alt click selects objects over the cursor in order from top to bottom
• shift ctrl c turns an object into a path giving it nodes
• ctrl l removes all unnecessary nodes
• ctrl j does some offset thing that I have to look into
• add nodes by double clicking and delete them with delete

Diagram of overlapping objects

Teapot

I finished making the teapot but as I thought it would not fill correctly. The spout was challenging to make along with the handle because it's not easy to use the control points or make the arcs correct. Besides that though, the figure looks similar to what I drew.

http://students.gctaa.net/~snicholakos/webgraphics/teapot.svg

Teapot

I have been working on my teapot which is pretty challenging and I've already noticed some problems that I will have to deal with. The teapot won't fill correctly because of how I move the pen and I wonder if arcs would be better than curves. The sides look pretty good but I should make the body of the teapot one continuous line instead of moving the pen.

Paths

• d: used to start drawing
• M: move to
• A: makes an arc
• has rx and ry to specify the radius in the x and y direction
• L: makes a line
• coordinates are placed after each letter to specify where they go
• Q: makes a Bezier curve which is a line that is pulled by points like a magnet 
• Quadratic Bezier curves use only one control point
• Cubic Bezier curves use two control points
• lowercase letters are used to specify coordinates from where the "pen" was last left off while uppercase letters are for absolute points
• Z: automatically closes the path

Rock Paper Scissors

Here is my completed rock, paper, scissors project
http://students.gctaa.net/~snicholakos/javascript/rps.js

SVG and Code Academy

I finished fixing up both snowmen and I am perfectly okay with you using them as examples.
http://students.gctaa.net/~snicholakos/webgraphics/broken_snowman.svg

Code Academy
function: a set of code given a name and when called the code is executed allowing code to be repeated easily. 

function syntax: code must be contained within braces and all lines of code end with a semicolon.

parameters: the input for a function. It is called with the function and determines the output.
function call: to call a function, write its name with a parameter listed afterwards and it will run the code within the function
D.R.Y.: Don't Repeat Yourself. Use functions when possible to limit repetition.
return statement: allows a value to be used for a later use.
scope of a variable: variables can either be specific to a function or used throughout all the code
var in variable scope: var can be used to specify when a local or global variable should be used

Broken Snowman

The solution to the broken snowman problem would be

1. Both the x-min and y-min would be 0 and the y-max would be 900 I think because the lowest segment is 700 down and has a radius of 200. The x-max, I think, would equal 515 because the right hand goes only as far as 550 and the left hand goes to the right 35. 
2. The view box is now viewBox="0 0 515 900" 
3. I have changed the height and width to be proportional: width="10.3cm" height="18cm"
4. The scarf is broken in the sense that you moved it at the bottom of the file which no longer makes it the "back of scarf" but instead it has priority over all other shapes and is in the front everything.

I tested everything out on my snowman first, it was a bit tedious at first but now I figured out how to get rid of the white space so I will fix the broken snowman when I get the chance.

http://students.gctaa.net/~snicholakos/webgraphics/snowman.svg

Snowman

Here is my completed project for lesson 3
http://students.gctaa.net/~snicholakos/webgraphics/snowman.svg

Choose your own adventure Project

http://students.gctaa.net/~snicholakos/javascript/game.html

The project was helpful in reinforcing my understanding of some of JavaScript. It mainly focused on else/if statements but it was still helpful and I enjoyed it because it was funny.

Getting Down with SVG lesson 3

Lesson 3 briefly talked about the different shapes that can be used in SVG and how they can be modified.

If the line becomes the last shape defined then it is put in the front of all the other shapes. The last shape defined will always be in front while the first shape defined will be put in the back so it can be overlapped by every other shape.
1. shape farthest back
2. shape in front of 1
3. shape in front of 2 and 1
4. etc

The shape attributes are pretty simple. The new shapes work like a circle except you have to specify points where there should be a corner and for the line you specify points where it should start and end.

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