diff --git a/Assignment/HW3-JS_ToDo_List/HW3 - JavaScript & jQuery.docx b/Assignment/HW3-JS_ToDo_List/HW3 - JavaScript & jQuery.docx index a2980e4..3c1cf3d 100644 Binary files a/Assignment/HW3-JS_ToDo_List/HW3 - JavaScript & jQuery.docx and b/Assignment/HW3-JS_ToDo_List/HW3 - JavaScript & jQuery.docx differ diff --git a/Assignment/HW3-JS_ToDo_List/_css/style.css b/Assignment/HW3-JS_ToDo_List/_css/style.css index 78f00f7..d5ae517 100644 --- a/Assignment/HW3-JS_ToDo_List/_css/style.css +++ b/Assignment/HW3-JS_ToDo_List/_css/style.css @@ -1 +1,21 @@ /* Add CSS */ +#to-do{ + color: #39CCCC; /* Playing with fun colors for the two list headers*/ +} + +#complete{ + color: #85144b; +} + +#in_progress{ + color: #3D9970; +} + +/* Adding nice fonts to the headers and instructive text*/ +h1, h2{ + font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif; +} +p{ + font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; +} + diff --git a/Assignment/HW3-JS_ToDo_List/_js/main.js b/Assignment/HW3-JS_ToDo_List/_js/main.js index 0f11441..9bcd676 100644 --- a/Assignment/HW3-JS_ToDo_List/_js/main.js +++ b/Assignment/HW3-JS_ToDo_List/_js/main.js @@ -1,13 +1,37 @@ $(document).ready( $("#new-item").on('click', function() { // once the document loads, create new item with this function + var user_input = $('#todo-item-input').val(); + $('#list_todo').prepend("
  • " + user_input + "
    • "); }) ); +//$("#new-list").on('click', function() { + // once the document loads, create new item with this function + //$('.ul_list').append($('
      ',{ + //text: $('#input-new-list').val() + //})); +//}); + + $("#list_todo").on('click', "button", function() { // move from list_todo container to list_completed container + ($(this).html("Add To Complete List")); + var workingItem = $(this).parent(); + $("#working_todo").prepend(workingItem).css("color", "#B10DC9"); //changing the color of a completed item +}); + + +$("#working_todo").on('click', "button", function() { + // move from list_todo container to list_completed container + ($(this).html("Add To In Progress List")); + var completedItem = $(this).parent(); + $("#list_completed").prepend(completedItem).css("color", "#0074D9"); //changing the color of a completed item }); $("#list_completed").on('click', "button", function() { // move back from list_completed container to list_todo container + ($(this).html("Add To In Progress List")); + var incompleteItem = $(this).parent(); + $("#working_todo").prepend(incompleteItem); }); diff --git a/Assignment/HW3-JS_ToDo_List/index.html b/Assignment/HW3-JS_ToDo_List/index.html index 2ed5417..3e6df3c 100644 --- a/Assignment/HW3-JS_ToDo_List/index.html +++ b/Assignment/HW3-JS_ToDo_List/index.html @@ -21,18 +21,30 @@ Homework4 Javascript and jQuery + + +
      +

      Sasha's Super To-Do List!

      +

      To use this site, type a to-do into the box below and hit 'click me' to move it into your to-do list.
      Once complete, hit "move me!" to move it into the completed list.
      Moved it too soon? Hit 'Add To To-Do List!' to put it back in the to-do list.

      - - - - + + + + +

      To Do List

      +

      In Progress List

      +
      +

      Completed List

      diff --git a/Assignment/Homework_1 - HTML/Sasha-Pokedex.html b/Assignment/Homework_1 - HTML/Sasha-Pokedex.html new file mode 100644 index 0000000..1cc587b --- /dev/null +++ b/Assignment/Homework_1 - HTML/Sasha-Pokedex.html @@ -0,0 +1,69 @@ + + + + + + + + + + Pokedex + + + +
      + +

      Pokedex

      + +
      + +
      +
      +
      + +

      No. 025 Pikachu

      +
      +
        +
      1. Electric type
        2. +
      2. Gentle temperment
        3. +
      3. Grasslands
        4. +
      +
      + Pikachu +
      + +
      + + +
      +

      Pikachu can be seen napping in a bright sunlight. It has two red dots on its cheeks. By practicing HTML and CSS, Pikachu can lean confusion. Pikachu likes to steal computer chargers from Koala Boy because he's a Labrador.

      +
      + +
      + Charmander + Abra + Charmeleon + Clefairy + Ponyta + Horsea + Jigglypuff + Nidorino + Pidgey + Vulpix + Wartortle + Unsure + + +
      + + + diff --git a/Assignment/Homework_2 - CSS_ResponsiveDesign/Sasha-Pokedex .html b/Assignment/Homework_2 - CSS_ResponsiveDesign/Sasha-Pokedex .html new file mode 100644 index 0000000..3222864 --- /dev/null +++ b/Assignment/Homework_2 - CSS_ResponsiveDesign/Sasha-Pokedex .html @@ -0,0 +1,87 @@ + + + + + + + + + + Pokedex + + +
      +
      + +

      Pokedex

      +
      Pokeball
      +
      +
      + + +
      +
      + +
      +
      +
      Pikachu + + + + + + + + + + + + + +
      No. 025 Pikachu
      - Electric type
      - Gentle temperment
      - Grasslands
      +
      +
      +
      +
      +
      +

      Pikachu can be seen napping in a bright sunlight. It has two red dots on its cheeks. By practicing HTML and CSS, Pikachu can lean confusion. Pikachu likes to steal computer chargers from Koala Boy because he's a Labrador.

      +
      +
      +
      +
      +
      +
      +
      +
      +
      + Charmander + Abra + Charmeleon + Clefairy + Ponyta + Horsea + Jigglypuff + Nidorino + Pidgey + Vulpix + Wartortle + Unsure +
      +
      +
      +
      +
      +
      +
      +
      + + + diff --git a/Assignment/Homework_2 - CSS_ResponsiveDesign/area.html b/Assignment/Homework_2 - CSS_ResponsiveDesign/area.html new file mode 100644 index 0000000..8c05588 --- /dev/null +++ b/Assignment/Homework_2 - CSS_ResponsiveDesign/area.html @@ -0,0 +1,26 @@ + + + + + + + THIS IS AN AREA. WHAT'S AN AREA? :/ + + + +
      +

      THIS IS AN AREA. WHAT'S AN AREA? :/

      + +
      + + + + \ No newline at end of file diff --git a/Assignment/Homework_2 - CSS_ResponsiveDesign/main.css b/Assignment/Homework_2 - CSS_ResponsiveDesign/main.css new file mode 100644 index 0000000..dd50f70 --- /dev/null +++ b/Assignment/Homework_2 - CSS_ResponsiveDesign/main.css @@ -0,0 +1,224 @@ +/*----------------- CSS RESET ------------------*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: Futura, "Trebuchet MS", Arial, sans-serif; + vertical-align: baseline; + + } + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body{ + /*background-image: "assets/backgrounds/background_home.png";*/ + background: blue; +} + +.navigation{ + display: flex; + align-items: center; + justify-content: space-between; + border: 1px solid #333; + background-color: #bd5858; + +} + +button{ + display: inline; + color: darkgrey; + border-radius: 12px; + border: 1px solid; + font-size: 1em; + padding: 5px 7px; + background-color:ghostwhite; + width: 100px; + height: 30px; + margin-left: 15px; + padding-top:3px; + padding-bottom: 3px; +} + +.pikachu{ + float: left; + width: 100%; + margin-top: 15px; +} + +.pokeball{ + margin-right: 15px; +} + + +.pikachu_deets{ + display: inline-block; +} +.No-1-Pikachu{ + display: inline-block; +} + +table{ + border: 1px solid black; + color: black; + font-size: 18px; + background-color: white; + width: 70%; + margin-top: 70px; + margin-bottom: 70px; + padding: 40px; + float: right; +} + +td{ + padding: 7px; +} + +th{ + border: 1px solid black; + font-size: 25px; + padding: 10px; + color: white; + background-color: #5d90cb; + text-align: left; +} + +tbody{ + text-indent: 40px; +} + +.Content-Box{ + border: 6px solid #bd5858; + border-radius: 12px; + width: 100%; + text-align: center; + background-color: white; + padding-top: 25px; + padding-bottom: 25px; + font-size: 120%; + display: inline-block; + margin: auto; +} + +#pokedex{ + width: 100%; + display: inline-block; + +} + +.pokedex-images img{ + border: 3px solid darkgrey; + max-width: 15.68%; + width: 100%; +} + +#footer{ + display: flex; + align-items: center; + justify-content: space-between; +} + +#footer button{ + color: darkgrey; + border-radius: 12px; + border: 1px solid; + font-size: 1.3em; + padding: 5px 7px; + background-color:ghostwhite; + width: 120px; + height: 50px; + margin-top: 2.5%; + margin-bottom: 3%; + padding-top:2px; + padding-bottom: 2px; + margin-right: 6%; + margin-left: 6%; +} + +a{ + text-decoration: none; +} + + + +/*.No-1-Pikachu img[src="assets/images/pickahu.png"] { + max-width: 15%; + float: left; +}*/ + + +#site-title{ + font-family: verdana; + font-size: 200%; + color: white; + text-align: center; + +} + +#search{ + width:100%; + height:40px; + background:white; + border: 1px solid darkgrey; + font-size: 125%; + color: darkgrey; + vertical-align: bottom; +} + +#search p{ + padding-bottom: 10px; + padding-left: 4px; +} + + +body { + line-height: 1; + margin: 3%; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +#footer{ + width: 100%; + height: 100px; + border: 2px solid darkgrey; + background-color: #5d90cb; + font-size: 110%; + display: inline-block; + +} + +/*----------------- CSS RESET ------------------*/ + +/*Your main CSS should go here*/ diff --git a/Assignment/Homework_2 - CSS_ResponsiveDesign/map.html b/Assignment/Homework_2 - CSS_ResponsiveDesign/map.html new file mode 100644 index 0000000..6c50336 --- /dev/null +++ b/Assignment/Homework_2 - CSS_ResponsiveDesign/map.html @@ -0,0 +1,26 @@ + + + + + + + THIS IS A MAP (BUT THERE'S NO MAP HERE) + + + +
      +

      THIS IS A MAP (BUT THERE'S NO MAP HERE)

      + +
      + + + + diff --git a/Labs/Lab 4 - Responsive Design/index.html b/Labs/Lab 4 - Responsive Design/index.html index a46bb7c..ed25de5 100644 --- a/Labs/Lab 4 - Responsive Design/index.html +++ b/Labs/Lab 4 - Responsive Design/index.html @@ -16,7 +16,7 @@
      -

      Disney gone Kareoke

      +

      Disney gone Karaoke