From f40eb211f5d0e27bc7c1255d252f807e0e97553b Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 24 Oct 2018 19:02:48 -0500 Subject: [PATCH 01/36] test --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 247bea4f..dee93569 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,6 @@ -

Hello, world!

+

Hello Laxmi!

From 1d8e5f957acd4715eaf901f09c453d1548bc25c1 Mon Sep 17 00:00:00 2001 From: Laxmi G Date: Wed, 24 Oct 2018 19:16:23 -0500 Subject: [PATCH 02/36] Initial Box model code --- 02boxmodel/index.html | 28 ++++++++++++++++++++++++++++ 02boxmodel/style.css | 21 +++++++++++++++++++++ 2 files changed, 49 insertions(+) diff --git a/02boxmodel/index.html b/02boxmodel/index.html index e69de29b..6ad42f22 100644 --- a/02boxmodel/index.html +++ b/02boxmodel/index.html @@ -0,0 +1,28 @@ + + + + + + + Document + + + +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + diff --git a/02boxmodel/style.css b/02boxmodel/style.css index e69de29b..7eee417a 100644 --- a/02boxmodel/style.css +++ b/02boxmodel/style.css @@ -0,0 +1,21 @@ +body { + background-color: black; + } + + .planet.earth { + margin: 500px auto; + height: 500px; + width: 45; + } + + .earth.crust { + background-color: yellow; + border-color: orange; + border-style: blue; + } + + .mantle { + background-color: green; + border-color: blue; + border-style: solid; + } \ No newline at end of file From 9b5576524c7208e27188bcb79e51e9d9536c7f85 Mon Sep 17 00:00:00 2001 From: Laxmi G Date: Wed, 24 Oct 2018 19:21:29 -0500 Subject: [PATCH 03/36] Corrected formatting --- 02boxmodel/index.html | 40 +++++++++++++++++++++------------------- 02boxmodel/style.css | 40 ++++++++++++++++++++-------------------- 2 files changed, 41 insertions(+), 39 deletions(-) diff --git a/02boxmodel/index.html b/02boxmodel/index.html index 6ad42f22..68bd9f90 100644 --- a/02boxmodel/index.html +++ b/02boxmodel/index.html @@ -1,28 +1,30 @@ + - - - - Document - + + + + Document + + -
-
-
-
-
-
+
+
+
+
- -
-
-
-
-
-
+
+
+ +
+
+
+
+
+
- + \ No newline at end of file diff --git a/02boxmodel/style.css b/02boxmodel/style.css index 7eee417a..abeed1b9 100644 --- a/02boxmodel/style.css +++ b/02boxmodel/style.css @@ -1,21 +1,21 @@ body { - background-color: black; - } - - .planet.earth { - margin: 500px auto; - height: 500px; - width: 45; - } - - .earth.crust { - background-color: yellow; - border-color: orange; - border-style: blue; - } - - .mantle { - background-color: green; - border-color: blue; - border-style: solid; - } \ No newline at end of file + background-color: black; +} + +.planet.earth { + margin: 500px auto; + height: 500px; + width: 45; +} + +.earth.crust { + background-color: yellow; + border-color: orange; + border-style: blue; +} + +.mantle { + background-color: green; + border-color: blue; + border-style: solid; +} \ No newline at end of file From d5eb0d346fc2fa8559259a06071e44ea0fa06d24 Mon Sep 17 00:00:00 2001 From: Laxmi G Date: Fri, 26 Oct 2018 15:01:50 -0500 Subject: [PATCH 04/36] Add my changes Nice Day --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index dee93569..7b022eb9 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,6 @@ -

Hello Laxmi!

+

Nice Day!

From 04e32f585ef26383ff6ffdf4b3d624c7de3ff974 Mon Sep 17 00:00:00 2001 From: Laxmi G Date: Mon, 29 Oct 2018 23:23:29 -0500 Subject: [PATCH 05/36] Changes to Bio index --- 02boxmodel/index.html | 45 +++++++++--------- 02boxmodel/style.css | 103 ++++++++++++++++++++++++++++++++++-------- 2 files changed, 105 insertions(+), 43 deletions(-) diff --git a/02boxmodel/index.html b/02boxmodel/index.html index 68bd9f90..2768d8f5 100644 --- a/02boxmodel/index.html +++ b/02boxmodel/index.html @@ -1,30 +1,29 @@ - - + + - - - - Document - + + + +Planets + -
-
-
-
-
-
-
+ + + +
+
+ + -
-
-
-
-
-
-
+ + + + + + + - - \ No newline at end of file + \ No newline at end of file diff --git a/02boxmodel/style.css b/02boxmodel/style.css index abeed1b9..688ed72b 100644 --- a/02boxmodel/style.css +++ b/02boxmodel/style.css @@ -1,21 +1,84 @@ -body { - background-color: black; -} - -.planet.earth { - margin: 500px auto; - height: 500px; - width: 45; -} -.earth.crust { - background-color: yellow; - border-color: orange; - border-style: blue; -} - -.mantle { - background-color: green; - border-color: blue; - border-style: solid; -} \ No newline at end of file +body { + background-color: black; + } + * { + box-sizing: border-box; + } + + .planet { + margin: 50px auto; + } + + .core { + background-color:yellow; + border-color:orange; + border-style:solid; + } + + .mantle { + background-color:orangered; + border-color:red; + border-style: solid; + } + + .crust { + background-color:brown; + /* border-color depends on planet! */ + border-style: solid; + } + + /* + planet height and width => height and width + inner-layers => padding; + outer-layers => border-width; + make it round => border-radius; + */ + .planet.earth { + height: 320px; + width: 320px; + } + + .earth .crust { + padding: 50px; + border-width: 10px; + border-color:blue; + border-radius: 50%; + } + + .earth .mantle { + padding: 20px; + border-width: 30px; + border-radius: 50%; + } + + .earth .core { + padding: 20px; + border-width: 30px; + border-radius: 50%; + } + + .planet.mars { + height: 224px; + width: 224px; + } + + .mars .crust { + padding: 35px; + border-width: 14px; + border-color: rgb(233, 200, 15); + border-radius: 50%; + } + + .mars .mantle { + padding: 7px; + border-width: 21px; + border-radius: 50%; + } + + .mars .core { + padding: 10px; + border-width: 20px; + border-radius: 50%; + } + \ No newline at end of file From 05136b32a8f9a69ad170ddcd6bf437544f747876 Mon Sep 17 00:00:00 2001 From: Laxmi G Date: Wed, 31 Oct 2018 11:52:58 -0500 Subject: [PATCH 06/36] Changed to Hello World index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 7b022eb9..431b1ba7 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,6 @@ -

Nice Day!

+

Hello World!

From 36428cb16e82d3ec1495ca2d1ae6bfd87e82b915 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Fri, 9 Nov 2018 15:50:34 -0600 Subject: [PATCH 07/36] Responsive Changes --- 06responsive/index.html | 180 ++++++++++++++++++++++++++++++++++++++++ 06responsive/style.css | 162 ++++++++++++++++++++++++++++++++++++ 2 files changed, 342 insertions(+) diff --git a/06responsive/index.html b/06responsive/index.html index 8b137891..b83c2c98 100644 --- a/06responsive/index.html +++ b/06responsive/index.html @@ -1 +1,181 @@ + + + + + + + + Document + + + + +
+
+

+
Travel-Gram

+

Desktop

+
+
+
+
+
+
+

In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. +

+
+
+
12
+
Read More
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. +

+
+
+
12
+
Read More
+
+
+
+
+ +
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. +

+
+
+
12
+
Read More
+
+
+
+ +
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. +

+
+
+
12
+
Read More
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. +

+
+
+
12
+
Read More
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. +

+
+
+
12
+
Read More
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. +

+
+
+
12
+
Read More
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. +

+
+
+
12
+
Read More
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. +

+
+
+
12
+
Read More
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. +

+
+
+
12
+
Read More
+
+
+
+
+
+ + \ No newline at end of file diff --git a/06responsive/style.css b/06responsive/style.css index d3f5a12f..fb018525 100644 --- a/06responsive/style.css +++ b/06responsive/style.css @@ -1 +1,163 @@ +* { + box-sizing: border-box; + } + + body { + padding: 20px; + } + + .container { + /* min-height: 250px; + min-width: 345px; */ + display: flex; + flex-direction: row; + flex: 1; + flex-wrap: wrap; + box-shadow:1px 1px 1px 1px black; + padding: 15px 10px 0; + } + + /* .card3 { + display: flex; + } */ + + .img { + display:flex; + flex: 1; + height: 130px; + justify-content: center; + padding-bottom: 5px; + } + + img{ + max-width: 150px; + } + + .text { + min-width: 230px; + flex: 1; + padding: 0 20px 10px; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .actions { + display: flex; + /* align-self: row; */ + flex: 1; + justify-content: space-between; + padding-top: 10px; + } + + a:hover{ + color: blue; + } + + .card1 { + grid-area: card1; + } + .card2 { + grid-area: card2; + } + .card3 { + grid-area: card3; + } + .card4 { + grid-area: card4; + } + .card5 { + grid-area: card5; + } + .card6 { + grid-area: card6; + } + .card7 { + grid-area: card7; + } + .card8 { + grid-area: card8; + } + .card9 { + grid-area: card9; + } + .card10 { + grid-area: card10; + } + + header{ + grid-area: header; + text-align: center; + /* display: flex; + justify-content: center; */ + /* flex: 1; */ + } + + /* .h2{ + grid-area: h2; + /* display: flex; + justify-content: center; */ + /* } */ + + /* .section{ + min-height: calc(100vh - 54px); + grid-area: section; + } */ + + @media (min-width: 576px){ + main{ + display:grid; + grid-template-columns: 1fr; + min-height: 100vh; + grid-column-gap: 10px; + grid-row-gap: 10px; + grid-template-areas: + "header " + "card1 " + "card2 " + "card3 " + "card4 " + "card5 " + "card6 " + "card7 " + "card8 " + "card9 " + "card10 "; + } +} + @media (min-width: 576px){ + main{ + display:grid; + grid-template-columns: 1fr 1fr; + min-height: 100vh; + grid-column-gap: 10px; + grid-row-gap: 10px; + grid-template-areas: + "header header " + "card1 card1 " + "card2 card3" + "card4 card4" + "card5 card5" + "card6 card7" + "card8 card8" + "card9 card10"; + } + } + + @media (min-width: 768px){ + main{ + display:grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + min-height: 100vh; + grid-column-gap: 10px; + grid-row-gap: 10px; + grid-template-areas: + "header header header header" + "card1 card1 card2 card2" + "card3 card3 card4 card5" + "card3 card3 card6 card6" + "card7 card8 card9 card10"; + } + } + From 3e567794f0071cceb3ce00dc7307b009f241ea5b Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 28 Nov 2018 14:15:53 -0600 Subject: [PATCH 08/36] calculator app --- 08calculator/index.html | 61 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/08calculator/index.html b/08calculator/index.html index e69de29b..342808e9 100644 --- a/08calculator/index.html +++ b/08calculator/index.html @@ -0,0 +1,61 @@ + + + + + + + + + + + Document + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
123+
456-
789*
+/-0=/
DeleteClear
+
+ + + + + + + + \ No newline at end of file From 2977b7384ea97645eb625460922fccc013bcc1ab Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 12:45:29 -0600 Subject: [PATCH 09/36] Added Box model to workbook landing page --- 02boxmodel/index.html | 50 +++++++++++++++++++------------------------ 1 file changed, 22 insertions(+), 28 deletions(-) diff --git a/02boxmodel/index.html b/02boxmodel/index.html index 2768d8f5..e0e0987c 100644 --- a/02boxmodel/index.html +++ b/02boxmodel/index.html @@ -1,29 +1,23 @@ - - + + + + + + + Document + + + +
+
+
+
+
- - - - -Planets - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file +
+
+
+
+
+ + From f710e16c5933983d7123ccad6f9605cc97cde2f1 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 15:45:00 -0600 Subject: [PATCH 10/36] Setting up workbook for laxmi --- index.html | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 431b1ba7..b10fc07d 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,28 @@ - + - + + + + Document + + -

Hello World!

+

Hello, Laxmi

+ - + + From 873dca94b36920781c8c0dca576fea95a25c1760 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 21:03:47 -0600 Subject: [PATCH 11/36] 02box model style sheet --- 02boxmodel/style.css | 153 +++++++++++++++++++++---------------------- 1 file changed, 75 insertions(+), 78 deletions(-) diff --git a/02boxmodel/style.css b/02boxmodel/style.css index 688ed72b..87e61322 100644 --- a/02boxmodel/style.css +++ b/02boxmodel/style.css @@ -1,84 +1,81 @@ - -body { +body { background-color: black; - } - * { - box-sizing: border-box; - } - - .planet { - margin: 50px auto; - } - - .core { - background-color:yellow; - border-color:orange; - border-style:solid; - } - - .mantle { - background-color:orangered; - border-color:red; - border-style: solid; - } - - .crust { - background-color:brown; +} + +* { + box-sizing: border-box; + border-radius: 50%; +} + +.planet { + margin: 50px auto; +} + +.core { + background-color: yellow; + border-color: orange; + border-style: solid; +} + +.mantle { + background-color: orangered; + border-color: red; + border-style: solid; +} + +.crust { + background-color: brown; /* border-color depends on planet! */ - border-style: solid; - } - - /* + border-style: solid; +} + +/* planet height and width => height and width inner-layers => padding; outer-layers => border-width; make it round => border-radius; - */ - .planet.earth { - height: 320px; - width: 320px; - } - - .earth .crust { - padding: 50px; - border-width: 10px; - border-color:blue; - border-radius: 50%; - } - - .earth .mantle { - padding: 20px; - border-width: 30px; - border-radius: 50%; - } - - .earth .core { - padding: 20px; - border-width: 30px; - border-radius: 50%; - } - - .planet.mars { - height: 224px; - width: 224px; - } - - .mars .crust { - padding: 35px; - border-width: 14px; - border-color: rgb(233, 200, 15); - border-radius: 50%; - } - - .mars .mantle { - padding: 7px; - border-width: 21px; - border-radius: 50%; - } - - .mars .core { - padding: 10px; - border-width: 20px; - border-radius: 50%; - } - \ No newline at end of file +*/ + +.planet.earth { + height: 500px; + width: 500px; +} + +.earth .crust { + padding: 10px; + border-width: 10px; + border-color: blue; +} + +.earth .mantle { + padding: 140px; + + border-width: 40px; +} + +.earth .core { + padding: 30px; + border-width: 30px; +} + +.planet.mars { + height: 200px; + width: 200px; +} + +.mars .crust { + border-color: #f3b19d; + padding: 20px; + border-width: 10px; +} + +.mars .mantle { + padding: 40px; + border-width: 20px; + border-color: brown margin; +} + +.mars .core { + padding: 6px; + border-width: 5px; +} From 804b60da7e83f67f1247caf95fe101bc478e6141 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 21:09:25 -0600 Subject: [PATCH 12/36] Javascripting --- 07javascripting/accessing-array-values.js | 2 ++ 07javascripting/array-filtering.js | 7 +++++++ 07javascripting/arrays.js | 2 ++ 07javascripting/correct - for - loop.js | 8 ++++++++ 07javascripting/for-loop.js | 8 ++++++++ 07javascripting/function-arguments.js | 6 ++++++ 07javascripting/functions.js | 5 +++++ 07javascripting/if-statement.js | 9 +++++++++ 07javascripting/introduction.js | 1 + 07javascripting/looping-through-arrays.js | 7 +++++++ 07javascripting/number-to-string.js | 3 +++ 07javascripting/numbers.js | 3 +++ 07javascripting/object-properties.js | 4 ++++ 07javascripting/objects.js | 7 +++++++ 07javascripting/revising-strings.js | 3 +++ 07javascripting/rounding-numbers.js | 3 +++ 07javascripting/scope.js | 20 ++++++++++++++++++++ 07javascripting/string-length.js | 2 ++ 07javascripting/strings.js | 2 ++ 07javascripting/variables.js | 2 ++ 20 files changed, 104 insertions(+) create mode 100644 07javascripting/accessing-array-values.js create mode 100644 07javascripting/array-filtering.js create mode 100644 07javascripting/arrays.js create mode 100644 07javascripting/correct - for - loop.js create mode 100644 07javascripting/for-loop.js create mode 100644 07javascripting/function-arguments.js create mode 100644 07javascripting/functions.js create mode 100644 07javascripting/if-statement.js create mode 100644 07javascripting/looping-through-arrays.js create mode 100644 07javascripting/number-to-string.js create mode 100644 07javascripting/numbers.js create mode 100644 07javascripting/object-properties.js create mode 100644 07javascripting/objects.js create mode 100644 07javascripting/revising-strings.js create mode 100644 07javascripting/rounding-numbers.js create mode 100644 07javascripting/scope.js create mode 100644 07javascripting/string-length.js create mode 100644 07javascripting/strings.js create mode 100644 07javascripting/variables.js diff --git a/07javascripting/accessing-array-values.js b/07javascripting/accessing-array-values.js new file mode 100644 index 00000000..b1875d6c --- /dev/null +++ b/07javascripting/accessing-array-values.js @@ -0,0 +1,2 @@ +var food = ['apple', 'pizza', 'pear']; +console.log(food[1]); \ No newline at end of file diff --git a/07javascripting/array-filtering.js b/07javascripting/array-filtering.js new file mode 100644 index 00000000..d77301e7 --- /dev/null +++ b/07javascripting/array-filtering.js @@ -0,0 +1,7 @@ +var numbers = [1,2,3,4,5,6,7,8,9,10]; +var filtered = numbers.filter(function (numbers) +{ + return numbers % 2 === 0; +} +); +console.log(filtered); \ No newline at end of file diff --git a/07javascripting/arrays.js b/07javascripting/arrays.js new file mode 100644 index 00000000..a17f06ef --- /dev/null +++ b/07javascripting/arrays.js @@ -0,0 +1,2 @@ +var pizzatoppings = ['tomato sauce', 'cheese', 'pepperoni']; +console.log(pizzatoppings); \ No newline at end of file diff --git a/07javascripting/correct - for - loop.js b/07javascripting/correct - for - loop.js new file mode 100644 index 00000000..09028ad3 --- /dev/null +++ b/07javascripting/correct - for - loop.js @@ -0,0 +1,8 @@ +var total = 0; +var limit = 10; + +for (var i = 0; i < limit; i++) { + total += i; +} + +console.log(total); \ No newline at end of file diff --git a/07javascripting/for-loop.js b/07javascripting/for-loop.js new file mode 100644 index 00000000..3df2fe6a --- /dev/null +++ b/07javascripting/for-loop.js @@ -0,0 +1,8 @@ +var total = 0; +var limit = 10; +for (var i = 0; i < limit; i++) { + // log the numbers 0 through 9 + total += i; + } + + console.log (total); diff --git a/07javascripting/function-arguments.js b/07javascripting/function-arguments.js new file mode 100644 index 00000000..da860e90 --- /dev/null +++ b/07javascripting/function-arguments.js @@ -0,0 +1,6 @@ +function math(num1, num2, num3){ +return (num2 * num3 ) + num1; + +} + +console.log(math(53, 61, 67)); \ No newline at end of file diff --git a/07javascripting/functions.js b/07javascripting/functions.js new file mode 100644 index 00000000..d16989f7 --- /dev/null +++ b/07javascripting/functions.js @@ -0,0 +1,5 @@ +function eat(fruit){ +return fruit + ' tasted really good.'; + +} +console.log(eat('bananas')); diff --git a/07javascripting/if-statement.js b/07javascripting/if-statement.js new file mode 100644 index 00000000..232f908f --- /dev/null +++ b/07javascripting/if-statement.js @@ -0,0 +1,9 @@ +var fruit = "orange"; +if(fruit.length > 5) { + + console.log ("The fruit name has more than five characters."); +} +else{ + + console.log ("The fruit name has five characters or less"); +} \ No newline at end of file diff --git a/07javascripting/introduction.js b/07javascripting/introduction.js index 8b137891..b72d6cbf 100644 --- a/07javascripting/introduction.js +++ b/07javascripting/introduction.js @@ -1 +1,2 @@ + console.log('hello'); \ No newline at end of file diff --git a/07javascripting/looping-through-arrays.js b/07javascripting/looping-through-arrays.js new file mode 100644 index 00000000..01378386 --- /dev/null +++ b/07javascripting/looping-through-arrays.js @@ -0,0 +1,7 @@ +var pets = ['cat', 'dog', 'rat']; + for (var i = 0; i < 3; i++) { + // log the numbers 0 through 9 + pets[i] = pets[i] + 's'; + } + + console.log (pets); \ No newline at end of file diff --git a/07javascripting/number-to-string.js b/07javascripting/number-to-string.js new file mode 100644 index 00000000..134a7c91 --- /dev/null +++ b/07javascripting/number-to-string.js @@ -0,0 +1,3 @@ +var n = 128; +n = n.toString(); +console.log(n); \ No newline at end of file diff --git a/07javascripting/numbers.js b/07javascripting/numbers.js new file mode 100644 index 00000000..27edcdc7 --- /dev/null +++ b/07javascripting/numbers.js @@ -0,0 +1,3 @@ +var example = 123456789; +console.log(example); + diff --git a/07javascripting/object-properties.js b/07javascripting/object-properties.js new file mode 100644 index 00000000..0b763ebd --- /dev/null +++ b/07javascripting/object-properties.js @@ -0,0 +1,4 @@ +var food = { + types: 'only pizza' + }; +console.log(food.types); \ No newline at end of file diff --git a/07javascripting/objects.js b/07javascripting/objects.js new file mode 100644 index 00000000..93542f91 --- /dev/null +++ b/07javascripting/objects.js @@ -0,0 +1,7 @@ +var pizza = { + toppings: ['cheese', 'sauce', 'pepperoni'], + crust: 'deep dish', + serves: 2 + }; + + console.log(pizza); \ No newline at end of file diff --git a/07javascripting/revising-strings.js b/07javascripting/revising-strings.js new file mode 100644 index 00000000..c3edf5ac --- /dev/null +++ b/07javascripting/revising-strings.js @@ -0,0 +1,3 @@ +var pizza = 'pizza is alright'; +pizza = pizza.replace('alright', 'wonderful'); +console.log(pizza); \ No newline at end of file diff --git a/07javascripting/rounding-numbers.js b/07javascripting/rounding-numbers.js new file mode 100644 index 00000000..f1273a98 --- /dev/null +++ b/07javascripting/rounding-numbers.js @@ -0,0 +1,3 @@ +var roundup = 1.5; +var rounded = Math.round(roundup); +console.log(rounded); diff --git a/07javascripting/scope.js b/07javascripting/scope.js new file mode 100644 index 00000000..7fa6b8eb --- /dev/null +++ b/07javascripting/scope.js @@ -0,0 +1,20 @@ +var a = 1, b = 2, c = 3; + +(function firstFunction(){ + var b = 5, c = 6; + + (function secondFunction(){ + var b = 8; + console.log("a: "+a+", b: "+b+", c: "+c); + + (function thirdFunction(){ + var a = 7, c = 9; + + (function fourthFunction(){ + var a = 1, c = 8; + + })(); + })(); + })(); +})(); + diff --git a/07javascripting/string-length.js b/07javascripting/string-length.js new file mode 100644 index 00000000..88992c9c --- /dev/null +++ b/07javascripting/string-length.js @@ -0,0 +1,2 @@ +var example = 'example string'; +console.log(example.length); diff --git a/07javascripting/strings.js b/07javascripting/strings.js new file mode 100644 index 00000000..507177c5 --- /dev/null +++ b/07javascripting/strings.js @@ -0,0 +1,2 @@ +var example = 'this is a string'; +console.log(example); diff --git a/07javascripting/variables.js b/07javascripting/variables.js new file mode 100644 index 00000000..06bc2b0a --- /dev/null +++ b/07javascripting/variables.js @@ -0,0 +1,2 @@ +var example = 'some string'; +console.log(example); \ No newline at end of file From aa848a9894a909eb2876090d14b408ecefb42fe7 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 23:12:16 -0600 Subject: [PATCH 13/36] 03 floats --- 03floats/index.html | 84 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/03floats/index.html b/03floats/index.html index e69de29b..2deffddf 100644 --- a/03floats/index.html +++ b/03floats/index.html @@ -0,0 +1,84 @@ + + + + + + + Document + + + + + + +
+ + +
+
+
+ +
+
+ + +
+
+ + +
+
+ + + + +
+
+ +
+
+
+
+ + From 5a81e9d5c024b28733b272267604ce8b0222bdf4 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 23:13:11 -0600 Subject: [PATCH 14/36] 03 floats style sheet --- 03floats/style.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) diff --git a/03floats/style.css b/03floats/style.css index e69de29b..1107cc46 100644 --- a/03floats/style.css +++ b/03floats/style.css @@ -0,0 +1,81 @@ +header { + /* /* top: 0; */ + width: 100%; + height: auto; + background-color: #183a55; +} +* { + box-sizing: border-box; +} + +header .logo { + float: left; +} +header ul { + float: right; + margin-top: 30px; +} + +header ul li { + float: left; + list-style: none; + margin-left: 10px; + margin-right: 10px; + padding: 5px; +} + +header a { + color: white; +} + +a { + text-decoration: none; +} + +header a:hover { + color: #03b5aa; +} +.clearfix:after { + content: ""; + clear: both; + display: block; +} + +main { + background-image: url("./img/airline.jpg"); + background-size: cover; + height: 86vh; + margin: 0; +} + +section { + position: absolute; + margin-left: 20px; + margin-top: 100px; +} + +section nav a { + width: 33.3%; + float: left; + background-color: teal; + text-align: center; + padding: 10px 0; + color: white; + border-right: 1px solid white; +} + +/* section nav li { + border-right: 1px solid white; +} */ + +section nav li:last-child a { + border-right: none; +} +section nav a:hover { + background-color: blue; +} +section form { + padding: 10px; + background-color: #183a55; + color: white; +} From 737e1b67f06248edec2fd2954f3819af87a3f5f6 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 23:21:50 -0600 Subject: [PATCH 15/36] 04FlexBox --- 04flexbox/index.html | 47 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/04flexbox/index.html b/04flexbox/index.html index e69de29b..7a9723fb 100644 --- a/04flexbox/index.html +++ b/04flexbox/index.html @@ -0,0 +1,47 @@ + + + + + + + Document + + + + +
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder text + used to demonstrate the visual form of a document without relying on + meaningful content (also called greeking). Replacing the actual + content with placeholder text allows designers to design the form of + the content before the content itself has been produced. The lorem + ipsum text is typically a scrambled section of De finibus bonorum et + malorum, a 2nd-century BC Latin text by Cicero, with words altered, + added, and removed to make it nonsensical, improper Latin. A + variation of the ordinary lorem ipsum text has been used in + typesetting since the 1960s or earlier, when it was popularized by + advertisements for Letraset transfer sheets. It was introduced to + the Information Age in the mid-1980s by Aldus Corporation, which + employed it in graphics and word-processing templates for its + desktop publishing program PageMaker. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+ + From 606e39074bff59ad7947b34fd988cf0417208697 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 23:23:16 -0600 Subject: [PATCH 16/36] 04Flexbox --- 04flexbox/style.css | 59 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/04flexbox/style.css b/04flexbox/style.css index e69de29b..6985da8d 100644 --- a/04flexbox/style.css +++ b/04flexbox/style.css @@ -0,0 +1,59 @@ +* { + box-sizing: border-box; +} + +body { + padding: 20px; +} + +.container { + min-height: 250px; + min-width: 345px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + box-shadow: 1px 1px 1px black; + padding: 15px 10px 0; +} + +.img { + display: flex; + flex-basis: 0; + flex-grow: 1; + height: 230px; + justify-content: center; + padding-bottom: 5px; +} + +img { + max-width: 285px; +} + +.text { + min-width: 230px; + flex-basis: 0; + flex-grow: 3; + padding: 0 20px 10px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.actions { + display: flex; + /* align-self: row; */ + justify-content: space-between; + padding-top: 10px; +} + +a:hover { + color: blue; +} +/* +.readmore { + align-self: flex-end; +} + +.heart { + align-self: flex-start; +} */ From 486904339adec2f8043556fd84043ea5dd28dc57 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 23:27:27 -0600 Subject: [PATCH 17/36] Grids --- 05grid/index.html | 289 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 289 insertions(+) diff --git a/05grid/index.html b/05grid/index.html index 8b137891..fb19ba42 100644 --- a/05grid/index.html +++ b/05grid/index.html @@ -1 +1,290 @@ + + + + + + + Document + + + + +
+
+

Travel-Gram

+

Desktop

+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has been + produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+ +
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+ + From e50ec6c63ddab619907b4b8404e052f9adbe8e10 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 23:28:45 -0600 Subject: [PATCH 18/36] 05grid --- 05grid/style.css | 117 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) diff --git a/05grid/style.css b/05grid/style.css index d3f5a12f..3c075baf 100644 --- a/05grid/style.css +++ b/05grid/style.css @@ -1 +1,118 @@ +* { + box-sizing: border-box; +} +body { + padding: 20px; +} + +.container { + /* min-height: 250px; + min-width: 345px; */ + display: flex; + flex-direction: row; + flex: 1; + flex-wrap: wrap; + box-shadow: 1px 1px 1px 1px black; + padding: 15px 10px 0; +} + +/* .card3 { + display: flex; + } */ + +.img { + display: flex; + flex: 1; + height: 130px; + justify-content: center; + padding-bottom: 5px; +} + +img { + max-width: 150px; +} + +.text { + min-width: 230px; + flex: 1; + padding: 0 20px 10px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.actions { + display: flex; + /* align-self: row; */ + flex: 1; + justify-content: space-between; + padding-top: 10px; +} + +a:hover { + color: blue; +} + +.card1 { + grid-area: card1; +} +.card2 { + grid-area: card2; +} +.card3 { + grid-area: card3; +} +.card4 { + grid-area: card4; +} +.card5 { + grid-area: card5; +} +.card6 { + grid-area: card6; +} +.card7 { + grid-area: card7; +} +.card8 { + grid-area: card8; +} +.card9 { + grid-area: card9; +} +.card10 { + grid-area: card10; +} + +header { + grid-area: header; + text-align: center; + /* display: flex; + justify-content: center; */ + /* flex: 1; */ +} + +/* .h2{ + grid-area: h2; + /* display: flex; + justify-content: center; */ +/* } */ + +/* .section{ + min-height: calc(100vh - 54px); + grid-area: section; + } */ +main { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + min-height: 100vh; + grid-column-gap: 10px; + grid-row-gap: 10px; + grid-template-areas: + "header header header header" + "card1 card1 card2 card2" + "card3 card3 card4 card5" + "card3 card3 card6 card6" + "card7 card8 card9 card10"; +} From 3257fb7075e4ea231d03b788c26486d64ddba4f2 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 23:33:08 -0600 Subject: [PATCH 19/36] 06Responsive --- 06responsive/index.html | 461 +++++++++++++++++++++++++--------------- 1 file changed, 285 insertions(+), 176 deletions(-) diff --git a/06responsive/index.html b/06responsive/index.html index b83c2c98..fb19ba42 100644 --- a/06responsive/index.html +++ b/06responsive/index.html @@ -1,181 +1,290 @@ - - - - - - + + + + Document - - - + + +
-
-

-
Travel-Gram

-

Desktop

-
-
-
-
-
-
-

In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. -

-
-
-
12
-
Read More
-
-
-
-
-
-
-
-
-
-

- In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. -

-
-
-
12
-
Read More
-
-
-
-
- -
-
-
-
-

- In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. -

-
-
-
12
-
Read More
-
-
-
- -
-
-
-
-
-

- In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. -

-
-
-
12
-
Read More
-
-
-
-
-
-
-
-
-
-

- In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. -

-
-
-
12
-
Read More
-
-
-
-
-
-
-
-
-
-

- In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. -

-
-
-
12
-
Read More
-
-
-
-
-
-
-
-
-
-

- In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. -

-
-
-
12
-
Read More
-
-
-
-
-
-
-
-
-
-

- In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. -

-
-
-
12
-
Read More
-
-
-
-
-
-
-
-
-
-

- In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. -

-
-
-
12
-
Read More
-
-
-
-
-
-
-
-
-
-

- In publishing and graphic design, lorem ipsum is a placeholder text used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced. -

-
-
-
12
-
Read More
-
-
-
-
-
- - \ No newline at end of file +
+

Travel-Gram

+

Desktop

+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+ +
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has been + produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+ +
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+
+
+
+
+
+

+ In publishing and graphic design, lorem ipsum is a placeholder + text used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to + design the form of the content before the content itself has + been produced. +

+
+
+
+ 12 +
+
+ Read More +
+
+
+
+
+ + + From 4d3f3189b39c6db40c9e24df8e7851ae802e4c28 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 23:35:48 -0600 Subject: [PATCH 20/36] 08Calculator --- 08calculator/index.html | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/08calculator/index.html b/08calculator/index.html index 342808e9..2ed87e5f 100644 --- a/08calculator/index.html +++ b/08calculator/index.html @@ -16,29 +16,29 @@ - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + @@ -46,8 +46,8 @@ - - + +
123+123+
456-456-
789*789*
+/-0=/+/-0=/
DeleteClearDeleteClear
From 6c2690164dd8ed302c9816fe72e000657fb67d9c Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 23:36:52 -0600 Subject: [PATCH 21/36] 08 calculator style sheet --- 08calculator/style.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/08calculator/style.css b/08calculator/style.css index e69de29b..4cc2c002 100644 --- a/08calculator/style.css +++ b/08calculator/style.css @@ -0,0 +1,10 @@ +input { + width: 119.5px; + margin-left: 2px + } + .button { + border: 1px solid black; + width: 26px; + text-align: center; + cursor: pointer; + } \ No newline at end of file From faa9163b329e6c097520e2eac8ccec94267ebb97 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 5 Dec 2018 23:37:30 -0600 Subject: [PATCH 22/36] 08 calculator js file --- 08calculator/script.js | 63 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 61 insertions(+), 2 deletions(-) diff --git a/08calculator/script.js b/08calculator/script.js index c1dcbe6c..3ca50df7 100644 --- a/08calculator/script.js +++ b/08calculator/script.js @@ -1,5 +1,64 @@ + 'use strict'; +document.addEventListener("DOMContentLoaded", function (event) { + document.querySelectorAll('.button').forEach((button) => { + button.addEventListener('click', (event) => { + let text = event.target.innerHTML; + if (text === '=') { + equals(); + } else if (text === '+/-') { + PlusMinus(); + } + + else if (text === 'Delete') { + deleteLast(); + } else if (text === 'Clear') { + clearResults(); + } + + else { + addNumber(text); + } + + }) + + }) + + + + function addNumber(num) { + document.querySelector("#results").value += num; + } + + function clearResults() { + document.querySelector("#results").value = ""; + } + + // function addition() { + // document.querySelector("#results").value += "+"; + // } + + function equals() { + document.querySelector("#results").value = eval(document.querySelector("#results").value); + } + + function deleteLast() { + let current = document.querySelector("#results").value; + document.querySelector("#results").value = current.slice(0, -1); + } + + // function substraction() { + // document.querySelector("#results").value += "-"; + // } + + // function Multiplication() { + // document.querySelector("#results").value += "*"; + // } -document.addEventListener("DOMContentLoaded", function(event) { - // You code here + // function division() { + // document.querySelector("#results").value += "/"; + // } + function PlusMinus() { + document.querySelector("#results").value = -document.querySelector("#results").value; + } }); From 68c01780998dba27780313e64903cf152780af49 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Tue, 18 Dec 2018 20:36:28 -0600 Subject: [PATCH 23/36] tic tac toe --- 10tic-tac-toe-node/index_1.js | 297 ++++++++++++++++++++++++++++++++++ 1 file changed, 297 insertions(+) create mode 100644 10tic-tac-toe-node/index_1.js diff --git a/10tic-tac-toe-node/index_1.js b/10tic-tac-toe-node/index_1.js new file mode 100644 index 00000000..40c08c88 --- /dev/null +++ b/10tic-tac-toe-node/index_1.js @@ -0,0 +1,297 @@ +// 'use strict'; + +// const assert = require('assert'); +// const readline = require('readline'); +// const rl = readline.createInterface({ +// input: process.stdin, +// output: process.stdout +// }); +// let board = [ +// [' ', ' ', ' '], +// [' ', ' ', ' '], +// [' ', ' ', ' '] +// ]; + +// let playerTurn = 'X'; + +// function printBoard() { +// console.log(' 0 1 2'); +// console.log('0 ' + board[0].join(' | ')); +// console.log(' ---------'); +// console.log('1 ' + board[1].join(' | ')); +// console.log(' ---------'); +// console.log('2 ' + board[2].join(' | ')); +// } + +// function horizontalWin() { +// if (((board[0][0]===board[0][1]) && (board[0][1] === board[0][2]))|| +// ((board[1][0]===board[1][1]) && (board[1][1] === board[2][2])) || +// ((board[2][0]===board[2][1]) && (board[2][1] === board[2][2])) && +// ((board[0][0]!=='') && (board[0][1] !==''))|| +// ((board[1][0]!=='') && (board[1][1] !=='')) || +// ((board[2][0]!=='') && (board[2][1] !==''))) + +// {console.log(board[0][0]); +// console.log ('True'); +// return true; + +// } +// else { +// console.log ('False'); +// return false; +// } + +// } + + + + +// // function isLegal() { +// // let currentendstack = stacks[yesendstack] +// // let length = currentendstack.length + +// // if(currentendstack[length - 1] < piece) +// // { +// // return false; + +// // } +// // } + + + + +// function isLegal(row, column) { +// if ((row >= 0 ) && (column <= 2 ) && (row <=2) && (column >=0) && (board[row,column] === ' ' ) ) +// { +// return true; + +// } +// else return false; +// } + + + +// function verticalWin() { +// // Your code here +// } + +// function diagonalWin() { + + +// // Your code here +// } + +// function checkForWin() { +// return(horizontalWin); +// } + +// function ticTacToe(row, column) { +// if (isLegal(row,column) ) +// { +// board[row][column]=playerTurn; +// if (playerTurn === 'X') { +// playerTurn = 'O'; +// } else if(playerTurn === 'O'){ +// playerTurn = 'X'; +// } +// } +// else console.log ("Illegal move"); + +// } + +// // Your code here + + +// function getPrompt() { +// printBoard(); +// console.log("It's Player " + playerTurn + "'s turn."); +// rl.question('row: ', (row) => { +// rl.question('column: ', (column) => { +// ticTacToe(row, column); +// getPrompt(); +// }); +// }); + +// } + + + +// // Tests + +// if (typeof describe === 'function') { + +// describe('#ticTacToe()', () => { +// it('should place mark on the board', () => { +// ticTacToe(1, 1); +// assert.deepEqual(board, [ [' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); +// }); +// it('should alternate between players', () => { +// ticTacToe(0, 0); +// assert.deepEqual(board, [ ['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); +// }); +// it('should check for vertical wins', () => { +// board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ]; +// assert.equal(verticalWin(), true); +// }); +// it('should check for horizontal wins', () => { +// board = [ ['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' '] ]; +// assert.equal(horizontalWin(), true); +// }); +// it('should check for diagonal wins', () => { +// board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ]; +// assert.equal(diagonalWin(), true); +// }); +// it('should detect a win', () => { +// assert.equal(checkForWin(), true); +// }); +// }); +// } else { + +// getPrompt(); + +// } + + +"use strict"; + +const assert = require("assert"); +const readline = require("readline"); +const rl = readline.createInterface({ + input: process.stdin, + output: process.stdout +}); +let board = [[" ", " ", " "], [" ", " ", " "], [" ", " ", " "]]; + +let playerTurn = "X"; + +function printBoard() { + console.log(" 0 1 2"); + console.log("0 " + board[0].join(" | ")); + console.log(" ---------"); + console.log("1 " + board[1].join(" | ")); + console.log(" ---------"); + console.log("2 " + board[2].join(" | ")); +} + +function horizontalWin() { + if ( + (board[0][0] === board[0][1] && + board[0][1] === board[0][2] && + board[0][0] === playerTurn) || + (board[1][0] === board[1][1] && + board[1][1] === board[1][2] && + board[1][0] === playerTurn) || + (board[2][0] === board[2][1] && + board[2][1] === board[2][2] && + board[2][0] === playerTurn) + ) { + return true; + } else { + return false; + } +} + +function verticalWin() { + if ( + (board[0][0] === board[1][0] && + board[0][0] === board[2][0] && + board[0][0] === playerTurn) || + (board[0][1] === board[1][1] && + board[1][1] === board[2][1] && + board[0][1] === playerTurn) || + (board[0][2] === board[1][2] && + board[1][2] === board[2][2] && + board[0][2] === playerTurn) + ) { + return true; + } else { + return false; + } +} + +function diagonalWin() { + if ( + (board[0][0] === board[1][1] && + board[0][0] === board[2][2] && + board[0][0] === playerTurn) || + (board[2][0] === board[1][1] && + board[1][1] === board[0][2] && + board[2][0] === playerTurn) + ) { + return true; + } else { + return false; + } +} + +function checkForWin() { + if (horizontalWin() || verticalWin() || diagonalWin()) { + console.log(`Player '${playerTurn}' wins`); + console.log("Return-true"); + return true; + } else { + console.log("Return-False"); + } +} + +function ticTacToe(row, column) { + board[row][column] = playerTurn; + checkForWin(); + playerTurn = playerTurn === "X" ? "O" : "X"; + // if (playerTurn === 'X'){ + // playerTurn = 'O'; + // } else if (playerTurn === 'O'){ + // playerTurn = 'X'; + // } +} + +function getPrompt() { + printBoard(); + console.log("It's Player " + playerTurn + "'s turn."); + rl.question("row: ", row => { + rl.question("column: ", column => { + ticTacToe(row, column); + getPrompt(); + }); + }); +} + +// Tests + +if (typeof describe === "function") { + describe("#ticTacToe()", () => { + it("should place mark on the board", () => { + ticTacToe(1, 1); + assert.deepEqual(board, [ + [" ", " ", " "], + [" ", "X", " "], + [" ", " ", " "] + ]); + }); + it("should alternate between players", () => { + ticTacToe(0, 0); + assert.deepEqual(board, [ + ["O", " ", " "], + [" ", "X", " "], + [" ", " ", " "] + ]); + }); + it("should check for vertical wins", () => { + board = [[" ", "X", " "], [" ", "X", " "], [" ", "X", " "]]; + assert.equal(verticalWin(), true); + }); + it("should check for horizontal wins", () => { + board = [["X", "X", "X"], [" ", " ", " "], [" ", " ", " "]]; + assert.equal(horizontalWin(), true); + }); + it("should check for diagonal wins", () => { + board = [["X", " ", " "], [" ", "X", " "], [" ", " ", "X"]]; + assert.equal(diagonalWin(), true); + }); + it("should detect a win", () => { + assert.equal(checkForWin(), true); + }); + }); +} else { + getPrompt(); +} \ No newline at end of file From 59f52930d7f7abac39b0cbd8514250c88f72092f Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Tue, 18 Dec 2018 21:08:20 -0600 Subject: [PATCH 24/36] 13 towers of hanoi --- 13towers-of-hanoi-node/index.js | 71 +++++++++++++++++++-------------- 1 file changed, 40 insertions(+), 31 deletions(-) diff --git a/13towers-of-hanoi-node/index.js b/13towers-of-hanoi-node/index.js index f5210825..70e155a4 100644 --- a/13towers-of-hanoi-node/index.js +++ b/13towers-of-hanoi-node/index.js @@ -1,7 +1,7 @@ -'use strict'; +"use strict"; -const assert = require('assert'); -const readline = require('readline'); +const assert = require("assert"); +const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout @@ -19,30 +19,43 @@ function printStacks() { console.log("c: " + stacks.c); } -function movePiece() { - // Your code here - +function movePiece(startStack, endStack) { + let piece = stacks[startStack].pop(); + stacks[endStack].push(piece); + checkForWin(); } -function isLegal() { - // Your code here - +function isLegal(startStack, endStack) { + if (stacks[endStack].length < 1) { + movePiece(startStack, endStack); + return true; + } else if ( + stacks[startStack][stacks[startStack].length - 1] < + stacks[endStack][stacks[endStack].length - 1] + ) { + movePiece(startStack, endStack); + return true; + } else { + return false; + } } function checkForWin() { - // Your code here - + if (stacks.b.length === 4) { + return true; + } else { + return false; + } } function towersOfHanoi(startStack, endStack) { - // Your code here - + isLegal(startStack, endStack); } function getPrompt() { printStacks(); - rl.question('start stack: ', (startStack) => { - rl.question('end stack: ', (endStack) => { + rl.question("start stack: ", startStack => { + rl.question("end stack: ", endStack => { towersOfHanoi(startStack, endStack); getPrompt(); }); @@ -51,44 +64,40 @@ function getPrompt() { // Tests -if (typeof describe === 'function') { - - describe('#towersOfHanoi()', () => { - it('should be able to move a block', () => { - towersOfHanoi('a', 'b'); +if (typeof describe === "function") { + describe("#towersOfHanoi()", () => { + it("should be able to move a block", () => { + towersOfHanoi("a", "b"); assert.deepEqual(stacks, { a: [4, 3, 2], b: [1], c: [] }); }); }); - describe('#isLegal()', () => { - it('should not allow an illegal move', () => { + describe("#isLegal()", () => { + it("should not allow an illegal move", () => { stacks = { a: [4, 3, 2], b: [1], c: [] }; - assert.equal(isLegal('a', 'b'), false); + assert.equal(isLegal("a", "b"), false); }); - it('should allow a legal move', () => { + it("should allow a legal move", () => { stacks = { a: [4, 3, 2, 1], b: [], c: [] }; - assert.equal(isLegal('a', 'c'), true); + assert.equal(isLegal("a", "c"), true); }); }); - describe('#checkForWin()', () => { - it('should detect a win', () => { + describe("#checkForWin()", () => { + it("should detect a win", () => { stacks = { a: [], b: [4, 3, 2, 1], c: [] }; assert.equal(checkForWin(), true); stacks = { a: [1], b: [4, 3, 2], c: [] }; - assert.equal(checkForWin(), false); + assert.equal(checkForWin(), false);node }); }); - } else { - getPrompt(); - } \ No newline at end of file From 520350a83597966af1005867025081175c5db1f5 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Tue, 18 Dec 2018 21:16:28 -0600 Subject: [PATCH 25/36] 13 towers of hanoi --- 13towers-of-hanoi-node/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/13towers-of-hanoi-node/index.js b/13towers-of-hanoi-node/index.js index 70e155a4..256ff164 100644 --- a/13towers-of-hanoi-node/index.js +++ b/13towers-of-hanoi-node/index.js @@ -95,7 +95,7 @@ if (typeof describe === "function") { stacks = { a: [], b: [4, 3, 2, 1], c: [] }; assert.equal(checkForWin(), true); stacks = { a: [1], b: [4, 3, 2], c: [] }; - assert.equal(checkForWin(), false);node + assert.equal(checkForWin(), false); }); }); } else { From d6ddc86d0e6c992ad093b2d322a8b1a92c5e42b3 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Wed, 19 Dec 2018 10:24:41 -0600 Subject: [PATCH 26/36] 09 Tic Tac Toe Dom --- 09tic-tac-toe-dom/index.html | 48 ++++++++++++++++----------------- 09tic-tac-toe-dom/script.js | 52 ++++++++++++++++++++++++++++++++++++ 09tic-tac-toe-dom/style.css | 36 +++++++++++++++++++++++++ 3 files changed, 112 insertions(+), 24 deletions(-) diff --git a/09tic-tac-toe-dom/index.html b/09tic-tac-toe-dom/index.html index ba7f2ee9..c344e5a0 100644 --- a/09tic-tac-toe-dom/index.html +++ b/09tic-tac-toe-dom/index.html @@ -1,26 +1,26 @@ - - - - - Document - - - -
-
-
-
-
-
-
-
-
-
-
-
- - - - \ No newline at end of file + + + + + Document + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/09tic-tac-toe-dom/script.js b/09tic-tac-toe-dom/script.js index e69de29b..aa16b34f 100644 --- a/09tic-tac-toe-dom/script.js +++ b/09tic-tac-toe-dom/script.js @@ -0,0 +1,52 @@ +"use strict"; + +document.addEventListener("DOMContentLoaded", function(event) { + let player = "X"; + + document.querySelectorAll("[data-cell]").forEach(cell => { + cell.addEventListener("click", event => { + if (player === "X" && event.target.innerHTML === "") { + event.target.innerHTML = "X"; + player = "Y"; + } else if (player === "Y" && event.target.innerHTML === "") { + event.target.innerHTML = "O"; + player = "X"; + } + }); + }); + + document.querySelector("#clear").addEventListener("click", function() { + document.querySelectorAll("[data-cell]").forEach(cell => { + cell.innerHTML = ""; + }); + }); +}); + + + + + + +// document.addEventListener("DOMContentLoaded", function (event) { +// document.querySelectorAll('.button').forEach((button) => { +// button.addEventListener('click', (event) => { +// let text = event.target.innerHTML; +// if (text === '=') { +// equals(); +// } else if (text === '+/-') { +// PlusMinus(); +// } + +// else if (text === 'Delete') { +// deleteLast(); +// } else if (text === 'Clear') { +// clearResults(); +// } + +// else { +// addNumber(text); +// } + +// }) + +// }) \ No newline at end of file diff --git a/09tic-tac-toe-dom/style.css b/09tic-tac-toe-dom/style.css index 533cd272..aadafb97 100644 --- a/09tic-tac-toe-dom/style.css +++ b/09tic-tac-toe-dom/style.css @@ -15,3 +15,39 @@ #announce-winner { font-size: 50px; } + + +/* #board { + display: flex; +} +.column { + width: 50px; + height: 300px; + background-color: #f2f2f2; + border-right: 1px solid #808080; + display: flex; + flex-direction: column; + justify-content: flex-end; +} + +.disc { + height: 50px; + width: 50px; + border-radius: 25px; +} + +.red { + background-color: red; +} + +.blue { + background-color: blue; +} + +.black { + background-color: black; +} + +.row { + clear: both; +} */ From f228b67a7bfc7babed0da7874899eca850dd36f9 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Sat, 22 Dec 2018 18:59:25 -0600 Subject: [PATCH 27/36] 01 Resume --- 01resume/index.html | 115 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) diff --git a/01resume/index.html b/01resume/index.html index e69de29b..2bffdcd3 100644 --- a/01resume/index.html +++ b/01resume/index.html @@ -0,0 +1,115 @@ + + + + + + + + Resume + + + +

Laxmi Gurumoorthy

+

Project Manager


+ Austin, TX, US
+ One Dell Way

+ EMAIL:test@gmail.com
+ PHONE- (xxx) xxx-xxx
+ WEBSITE- http://test.com

+ PROFILES
+

About

+

+ + Laxmi hails from Austin, TX. She has earned a degree in CS from the University of Minnesota. +

+ +

Work Experience

+ Project Manager, Dell
+ December 2013 - December 2014
+

+ Pied Piper is a multi-platform technology based on a propriatary universal compression algorithm that has consistently fielded high Weisman Scores that are not merely competetive, but approach the theoritical limit of lossless compression +

Highlights
+
    +
  • Build an algorithm for artist to detect if their music was violating copy right infringement laws
    • +
  • Successfully win Techcrunch Disrupt
    • +
  • Optimized an algorithm that hols the current world record for Weisman Scores
    • +
+

+ +

Volunteer Work

+ + Teacher. CoderDojo
+ January 2012 - January 2013
+ + Global movement of free coding clubs for young people + http://coderdojo.com/ +
HIGHLIGHTS
+
    +
  • Awarded Teacher of the Month
    • +
+ +

SKILLS

+ + Web Development
+ HTML + CSS + Javascript + +


+ Compression
+ MPEG + ZIP + CLIF + +

EDUCATION

+ M.S in Computer Science - University of Minnesota
+ June 2011 - January 2014
+ GPA: 4.0
+ +
COURSES
+
    +
  • DB1101 - Basic SQL
    • +
  • CS2011 - Java Introduction
    • +
+ +

AWARDS

+ + Digital compression Pioneer Award - Techcrunch
+ 01 November 2014

+ There is no spoon + +

PUBLICATIONS

+ + Video compression for 3d media
+ 01 October 2014

+ + Innovative middle-out compression algorithm that changes that way we store data.
+ http://en.wilipedia.oeg/wiki/Silicon_Valley_(TV_series) + +

INTERESTS

+ Wildlife
+ Forests + Unicorn +

LANGUAGES

+ + English
+ Fluency: Native speaker + +

REFERENCES

+ It is my pleasure to recomment Rochard, his performance working as a consultant for Main St. Company proved that he will be a valuable addition to any company.
+ - Erlich Bachman + + + + \ No newline at end of file From 2f9f27f3631a3ad8ffdc21de068f00a605e624f8 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Sat, 22 Dec 2018 19:02:24 -0600 Subject: [PATCH 28/36] final project --- 14final/index.html | 49 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/14final/index.html b/14final/index.html index e69de29b..fb8b0686 100644 --- a/14final/index.html +++ b/14final/index.html @@ -0,0 +1,49 @@ + + + + + + + + + + + Document + + + +
+ + + + + \ No newline at end of file From 05e54869156d1747c9cd80018be92d82820dfeec Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Sat, 22 Dec 2018 19:03:29 -0600 Subject: [PATCH 29/36] javascript --- 14final/script.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/14final/script.js b/14final/script.js index e69de29b..942bb133 100644 --- a/14final/script.js +++ b/14final/script.js @@ -0,0 +1,15 @@ +'use strict'; + +document.addEventListener('DOMContentLoaded', () => { + + document.querySelector('#slow').addEventListener('click', () => { + const currentSpeed = document.querySelector('.square').style.animationDuration; + document.querySelector('.square').style.animationDuration = `${Number(currentSpeed.split('s')[0]) + 10}s` + }); + + document.querySelector('#slower').addEventListener('click', () => { + const currentSpeed = document.querySelector('.square').style.animationDuration; + document.querySelector('.square').style.animationDuration = `${Number(currentSpeed.split('s')[0]) + 30}s` + }); + +}); \ No newline at end of file From 3b944a995d6dc4abd33c4bd2ae1ee350811ead25 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Sat, 22 Dec 2018 19:04:36 -0600 Subject: [PATCH 30/36] stylesheet --- 14final/style.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/14final/style.css b/14final/style.css index e69de29b..e1faad45 100644 --- a/14final/style.css +++ b/14final/style.css @@ -0,0 +1,49 @@ +/* +*{ + box-sizing: border-box; + border-radius: 50%; + } + + +.square { + height: 250px; + width: 250px; + background-color: blue; + box-sizing: border-box; + /* opacity: .9; */ + /* } + + .rotate { + -webkit-animation: spin 30s infinite linear; + animation-timing-function: linear; + + } + @keyframes spin { + 100% { + transform: rotate(360deg); + } + } */ + + + + .square { + height: 300px; + width: 300px; + background-color: blue; + animation-name: spin; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: linear; + border-radius: 50%; + /* background-image: url("./wheel_share.jpg"); */ + } + + img { + max-width: 300px; + } + @keyframes spin { + 100% { + transform: rotate(360deg); + } + } + From 59256d2af4cfaa76b8680fa7d54bc09ef2902d4a Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Sun, 23 Dec 2018 08:57:55 -0600 Subject: [PATCH 31/36] tic-tac-toedom --- 09tic-tac-toe-dom/index.html | 42 +++++++++++++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 3 deletions(-) diff --git a/09tic-tac-toe-dom/index.html b/09tic-tac-toe-dom/index.html index c344e5a0..73a8e1f4 100644 --- a/09tic-tac-toe-dom/index.html +++ b/09tic-tac-toe-dom/index.html @@ -8,7 +8,7 @@ -
+ + + + + + + + + + + + + + + + + + +
+ N/A + + N/A + + N/A +
+ N/A + + N/A + + N/A +
+ N/A + + N/A + + N/A +
- + From e89b2ce49729be34cda12df3a450bfff3dbb6a50 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Sun, 23 Dec 2018 09:02:23 -0600 Subject: [PATCH 32/36] tic tac toe js --- 09tic-tac-toe-dom/script.js | 82 +++++++++++++++++++++++++++++++++++-- 1 file changed, 79 insertions(+), 3 deletions(-) diff --git a/09tic-tac-toe-dom/script.js b/09tic-tac-toe-dom/script.js index aa16b34f..76bcfa23 100644 --- a/09tic-tac-toe-dom/script.js +++ b/09tic-tac-toe-dom/script.js @@ -1,6 +1,6 @@ "use strict"; -document.addEventListener("DOMContentLoaded", function(event) { +/*document.addEventListener("DOMContentLoaded", function(event) { let player = "X"; document.querySelectorAll("[data-cell]").forEach(cell => { @@ -8,9 +8,12 @@ document.addEventListener("DOMContentLoaded", function(event) { if (player === "X" && event.target.innerHTML === "") { event.target.innerHTML = "X"; player = "Y"; + event.target.innerHTML.alert("Winner X") + } else if (player === "Y" && event.target.innerHTML === "") { event.target.innerHTML = "O"; player = "X"; + event.target.innerHTML.alert("Winner X") } }); }); @@ -18,9 +21,11 @@ document.addEventListener("DOMContentLoaded", function(event) { document.querySelector("#clear").addEventListener("click", function() { document.querySelectorAll("[data-cell]").forEach(cell => { cell.innerHTML = ""; + event.target.innerHTML.alert("Winner clear") }); + }); -}); +});*/ @@ -49,4 +54,75 @@ document.addEventListener("DOMContentLoaded", function(event) { // }) -// }) \ No newline at end of file +// }) + + +document.addEventListener('DOMContentLoaded', function () { + var board = [-1,-1,-1,-1,-1,-1,-1,-1,-1]; + var wins = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] ]; + var turn = 0; + Array.from(document.querySelectorAll('td a'), function (link, i) { + link.addEventListener('click', gotClicked.bind(null, link, i)); + }); + + function gotClicked(link, i, e) { + e.preventDefault(); + if (doMove(i, 'You won!')) return; + randomAi(); + } + + + function doMove(i, msg) { + var td = document.querySelectorAll('td')[i]; + var player = turn % 2; + td.textContent = 'XO'[player]; + board[i] = player; + turn++; + if (isWinFor(player)) { + alert(msg); + return true; + } + if (turn == 9) { + alert("It's a draw"); + return true; + } + } + + function randomAi() { + var randomPick = Math.floor(Math.random()*(9-turn)); + for (var i in board) { + if (board[i] !== -1) continue; // used cell -- skip it + if (randomPick == 0) break; // found it + randomPick--; + } + doMove(i, 'You lost'); + } + + function isWinFor(player) { + for (var win of wins) { + var count = 0; + for (var index of win) { + if (board[index] !== player) break; + count++; + } + if (count == 3) { + Array.from(document.querySelectorAll('td a'), function (link, i) { + link.parentNode.innerHTML = ''; + }); + return true; + } + } + } + + +} + +); \ No newline at end of file From a5812fa18cd88c4fed786ab58d1762cd58612bf9 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Sun, 23 Dec 2018 09:04:10 -0600 Subject: [PATCH 33/36] tic tac toe style --- 09tic-tac-toe-dom/style.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/09tic-tac-toe-dom/style.css b/09tic-tac-toe-dom/style.css index aadafb97..67ebd099 100644 --- a/09tic-tac-toe-dom/style.css +++ b/09tic-tac-toe-dom/style.css @@ -16,6 +16,13 @@ font-size: 50px; } +table,tr,td{ + border-style:solid; + border-width:1px; + text-align: center +} +/* ***Fix the size of the board */ +td { width: 30px; height: 30px } /* #board { display: flex; From 0bf7faf6a5aa14a7f429fb0732b6bac37018e01d Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Sun, 23 Dec 2018 09:06:22 -0600 Subject: [PATCH 34/36] tic tac toe style --- 09tic-tac-toe-dom/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/09tic-tac-toe-dom/style.css b/09tic-tac-toe-dom/style.css index 67ebd099..184f97bd 100644 --- a/09tic-tac-toe-dom/style.css +++ b/09tic-tac-toe-dom/style.css @@ -1,7 +1,7 @@ #board { width: 300px; height: 300px; - display: grid; + display: flex; grid-template: repeat(3, 1fr) / repeat(3, 1fr); } From 0df4eb02f4a28448a6c243b0c79cb9116beaea31 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Sun, 23 Dec 2018 22:29:47 -0600 Subject: [PATCH 35/36] final project main link --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index b10fc07d..26305141 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@

Hello, Laxmi

  • Responsive Design
  • Calculator
  • Tic-Tac-Toe-DOM
    • +
  • Tic-Tac-Toe-DOM
    • From 3a62ec0c9d33f62aca2ce7081f5a8d4b35788871 Mon Sep 17 00:00:00 2001 From: Gurumoorthy Date: Sun, 23 Dec 2018 22:33:32 -0600 Subject: [PATCH 36/36] Added final project link to workbook landing page --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 26305141..df203653 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@

    Hello, Laxmi

  • Responsive Design
  • Calculator
  • Tic-Tac-Toe-DOM
    • -
  • Tic-Tac-Toe-DOM
    • +
  • final Project