From 263a03c4dba57759fa7f9fdfd05b5672da161317 Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Sun, 18 Jun 2017 15:01:04 +0100 Subject: [PATCH 01/15] added index.html and style.css file --- index.html | 12 ++++++++++++ style.css | 0 2 files changed, 12 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..6869ba7 --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e69de29 From 35d7b82f93a32ae7c08f189e9ed3aeed3833acb3 Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Tue, 20 Jun 2017 11:03:42 +0100 Subject: [PATCH 02/15] Added more details in the HTML --- index.html | 65 ++++++++++++++++++++++++++++++++++++------- style.css => main.css | 0 2 files changed, 55 insertions(+), 10 deletions(-) rename style.css => main.css (100%) diff --git a/index.html b/index.html index 6869ba7..4d44387 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,57 @@ - - - - - - - - - - + + + + Web Developer Test + + +Nice black background and red color touch background + +
+

CYF

+
+ + + + + +

About CYF

+

What We Do

+

+ CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, + whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum + dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem + ipsum dolor sit amet, whatever. +

+

+ Our focus +

+ +

Click here to download a PDF of our recent work

+

News

+

Show/Hide news item

+

CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, + whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum + dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a +

+

"I wanted to do something new and different. Sprite came to me with the idea. I thought it was cool. Withough fans, there's + no players". +

+

More Information

+

For more information about our products and services, please contact us using the form below

+

Items marked * are required fields

+
+

Contact name *:

+ +

Contact email address *:

+ +

Contact phone number:

+ + +
+ \ No newline at end of file diff --git a/style.css b/main.css similarity index 100% rename from style.css rename to main.css From 69abb812dd82defb5a102c0b833aa30d8982d452 Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Tue, 20 Jun 2017 13:20:42 +0100 Subject: [PATCH 03/15] have added some css and html but need to fix later.It's a draft --- assets/background.png => background.png | Bin index.html | 111 ++++++++++++++---------- main.css | 56 ++++++++++++ 3 files changed, 119 insertions(+), 48 deletions(-) rename assets/background.png => background.png (100%) diff --git a/assets/background.png b/background.png similarity index 100% rename from assets/background.png rename to background.png diff --git a/index.html b/index.html index 4d44387..1e7772a 100644 --- a/index.html +++ b/index.html @@ -3,55 +3,70 @@ Web Developer Test + + -Nice black background and red color touch background - -
-

CYF

-
- - - - - -

About CYF

-

What We Do

-

- CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, - whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum - dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem - ipsum dolor sit amet, whatever. -

-

- Our focus -

-
    -
  • Interactive
    • -
  • Mobile
    • -
  • Technology
    • -
-

Click here to download a PDF of our recent work

-

News

-

Show/Hide news item

-

CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, - whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum - dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a -

-

"I wanted to do something new and different. Sprite came to me with the idea. I thought it was cool. Withough fans, there's - no players". -

-

More Information

-

For more information about our products and services, please contact us using the form below

-

Items marked * are required fields

-
-

Contact name *:

- -

Contact email address *:

- -

Contact phone number:

- - -
+ +
+
+

CYF

+
+ + + + + +
+

About CYF

+
+
+

What We Do

+

+ CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, + whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum + dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem + ipsum dolor sit amet, whatever. +

+

Our focus

+
    +
  • Interactive
    • +
  • Mobile
    • +
  • Technology
    • +
+

Click here to download a PDF of our recent work

+
+
+

News

+

Show/Hide news item

+

CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, + whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum + dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a +

+

"I wanted to do something new and different. Sprite came to me with the idea. I thought it was cool. Withough fans, there's + no players". +

+
+
+

More Information

+

For more information about our products and services, please contact us using the form below

+

Items marked * are required fields

+
+
+
+
+
+
+
+
+
+
+
+ +
\ No newline at end of file diff --git a/main.css b/main.css index e69de29..72a6747 100644 --- a/main.css +++ b/main.css @@ -0,0 +1,56 @@ +.heading { + /*font-family: 'Kaushan Script';*/ + font-style: cursive; +} + +.whiteFont { + color: white; +} +.yellow { + color: yellow; + +} + +.red { + color: #C91A44; + +} + +.Italic { + font-style: italic; + +} + +.bordercontainer { + /*border: 3px solid blue;*/ + /*display: flex;*/ + /*margin-left: 1%;*/ + padding-left: 5%; + padding-right: 5%; + padding-bottom: 35%; + padding-top: 2%; + +} + +.submitbox { + /*border: 4px solid hotpink;*/ + padding-top: 1%; + padding-bottom: 1%; +} +.submitform { + /*border: 2px solid yellow;*/ + display: flex; + padding-bottom: 1%; + padding-top: 2%; + padding-right: 23%; + flex-direction: column; + justify-content: space-around; + +} + +.submitform .width { + margin-right: 38%; +} +.buttonSize { + padding-right: 5%; +} \ No newline at end of file From 5af51701efe37d42d17857fdf39eb93741267c6b Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Tue, 20 Jun 2017 15:17:58 +0100 Subject: [PATCH 04/15] Changed some font styles and background --- index.html | 23 +++++++++++++++++------ main.css | 29 ++++++++++++++++++++++++----- 2 files changed, 41 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 1e7772a..9fc28d1 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,18 @@ Web Developer Test - + + + + + + + @@ -27,13 +34,14 @@

About CYF

What We Do

- CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, + CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever.

Our focus

-
    + +
    • Interactive
    • Mobile
    • Technology
      • @@ -47,9 +55,11 @@

      Show/Hide news item

      whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a

      -

      "I wanted to do something new and different. Sprite came to me with the idea. I thought it was cool. Withough fans, there's - no players". -

      +
      +

      "I wanted to do something new and different. Sprite came to me with the idea. I thought it was cool. Withough fans, there's + no players. Can add so many things here. More topic will be welcome". +

      +

More Information

@@ -69,4 +79,5 @@

More Information

+ \ No newline at end of file diff --git a/main.css b/main.css index 72a6747..1cecec8 100644 --- a/main.css +++ b/main.css @@ -1,6 +1,8 @@ .heading { - /*font-family: 'Kaushan Script';*/ - font-style: cursive; + font-family: 'Lobster Two', cursive; + font-style: italic; + font-size: 60px; + } .whiteFont { @@ -24,7 +26,9 @@ .bordercontainer { /*border: 3px solid blue;*/ /*display: flex;*/ - /*margin-left: 1%;*/ + margin-right: 29%; + margin-left: 3%; + margin-bottom: 3%; padding-left: 5%; padding-right: 5%; padding-bottom: 35%; @@ -52,5 +56,20 @@ margin-right: 38%; } .buttonSize { - padding-right: 5%; -} \ No newline at end of file + padding-right: 2%; +} + +.indentedParagraph { + /*border: solid rebeccapurple;*/ + padding-left: 10%; +} + +.bold { + font-style: bold; + font-size: 25px; +} + +.listIndentation { + margin-left: -4%; +} + From ca8fcf3818c06bb9cbe3d077c78fdd8c5b4934ba Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Tue, 20 Jun 2017 20:05:56 +0100 Subject: [PATCH 05/15] Added JS file and selected the relevant buttons --- index.html | 18 +++++++++--------- main.js | 23 +++++++++++++++++++++++ 2 files changed, 32 insertions(+), 9 deletions(-) create mode 100644 main.js diff --git a/index.html b/index.html index 9fc28d1..73f382d 100644 --- a/index.html +++ b/index.html @@ -24,9 +24,9 @@

CYF

- - - + + +

About CYF

@@ -50,7 +50,7 @@

Our focus

News

-

Show/Hide news item

+

Show/Hide news item

CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a @@ -62,21 +62,21 @@

Show/Hide news item

-

More Information

+

More Information

For more information about our products and services, please contact us using the form below

Items marked * are required fields


-
+

-
+

-
+
- + diff --git a/main.js b/main.js new file mode 100644 index 0000000..bf4044b --- /dev/null +++ b/main.js @@ -0,0 +1,23 @@ +var SHnews = document.querySelector('.shnews'); +SHnews.addEventListener('click',ShowHideNews); + +function ShowHideNews() { + + +} + + + +var nameButton = document.querySelector('.nameInput'); +var emailButton = document.querySelector('.emailInput'); +var numberButton = document.querySelector('.numberInput'); +var submitButton = document.querySelector('.submitBtn'); + +var MInfoButton = document.querySelector('.MInfo'); +MInfoButton.addEventListener('click',MoreInFo); + +function MoreInFo() { + + +} + From 7d028c2fee30b44ed1861fe2d5365788c06eca93 Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Wed, 21 Jun 2017 15:16:46 +0100 Subject: [PATCH 06/15] finished homework, fixed mistakes and done --- index.html | 53 +++++++++++++++++++------------------ main.css | 27 ++++++++++++++++--- main.js | 78 +++++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 119 insertions(+), 39 deletions(-) diff --git a/index.html b/index.html index 73f382d..3bc0476 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,9 @@ + Web Developer Test - - - - - - - +
@@ -30,14 +25,14 @@

CYF

About CYF

-
+

What We Do

- CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, - whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum - dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem - ipsum dolor sit amet, whatever. + CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem + ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is + a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor + sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever.

Our focus

@@ -50,34 +45,40 @@

Our focus

News

-

Show/Hide news item

-

CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, - whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum - dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a -

-
-

"I wanted to do something new and different. Sprite came to me with the idea. I thought it was cool. Withough fans, there's - no players. Can add so many things here. More topic will be welcome". + ❱ Show/Hide news item +

+

CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum + dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a + fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor + sit amet, whatever. CYF is a

+
+

"I wanted to do something new and different. Sprite came to me with the idea. I thought it was cool. + Withough fans, there's no players. Can add so many things here. More topic will be welcome". +

+
-
-

More Information

+
+

More Information

For more information about our products and services, please contact us using the form below

Items marked * are required fields


-
+

-
+

-
+
- + + + + \ No newline at end of file diff --git a/main.css b/main.css index 1cecec8..72e0b78 100644 --- a/main.css +++ b/main.css @@ -1,5 +1,5 @@ .heading { - font-family: 'Lobster Two', cursive; + font-family: 'Apple-Chancery', cursive; font-style: italic; font-size: 60px; @@ -63,9 +63,7 @@ /*border: solid rebeccapurple;*/ padding-left: 10%; } - -.bold { - font-style: bold; +.biggertext { font-size: 25px; } @@ -73,3 +71,24 @@ margin-left: -4%; } +.inValid { + background-color : rebeccapurple; +} + +.hidden { + display: none; +} + +nav-bar button { + color: white; + font-size: 20px; + padding-left: 20px; + padding-right: 20px; + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */ + background: #4c4c4c; /* Old browsers */ + background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ + +} \ No newline at end of file diff --git a/main.js b/main.js index bf4044b..cc6b578 100644 --- a/main.js +++ b/main.js @@ -1,23 +1,83 @@ + var SHnews = document.querySelector('.shnews'); -SHnews.addEventListener('click',ShowHideNews); +SHnews.addEventListener('click', ShowHideNews); function ShowHideNews() { - - + ShowHide(document.querySelector('#News')); } +function ShowHide(element) { + if (element.className === "hidden") { + element.className = 'show'; + } else { + element.className = 'hidden'; + } +} -var nameButton = document.querySelector('.nameInput'); -var emailButton = document.querySelector('.emailInput'); -var numberButton = document.querySelector('.numberInput'); -var submitButton = document.querySelector('.submitBtn'); - var MInfoButton = document.querySelector('.MInfo'); -MInfoButton.addEventListener('click',MoreInFo); +MInfoButton.addEventListener('click', MoreInFo); function MoreInFo() { + ShowHide(document.querySelector('#moreInfo p')); } +var submitButton = document.querySelector('.submitBtn'); + +submitButton.addEventListener('click', submitForm); + +function submitForm(event) { + event.preventDefault(); + + var nameInput = document.querySelector('#example-name-input'); + var nameInputWV = nameInput.value; + var emailInput = document.querySelector('#example-email-input'); + var emailInputWV = emailInput.value; + var numberInput = document.querySelector('#example-phone-input'); + var numberInputWV = numberInput.value; + + var SubmitFormIsValid = true; + if (nameInputWV.length === 0) { + nameInput.className = 'nameInput inValid'; + SubmitFormIsValid = false; + } + // else { + // nameInput.className = 'nameInput'; + // nameInput.value = ""; + + // } + + if (emailInputWV.length === 0 || emailInputWV.indexOf('@') === -1) { + emailInput.className = 'emailInput inValid'; + SubmitFormIsValid = false; + } + // else { + // emailInput.className = 'emailInput'; + // emailInput.value = ""; + // } + if (numberInputWV.length > 11) { + numberInput.className = 'numberInput inValid'; + SubmitFormIsValid = false; + } + // else { + // numberInput.className = 'numberInput'; + // numberInput.value = ""; + + // } + + if (SubmitFormIsValid) { + alert('Thanks for filling the form'); + numberInput.className = 'numberInput'; + numberInput.value = ""; + + emailInput.className = 'emailInput'; + emailInput.value = ""; + + nameInput.className = 'nameInput'; + nameInput.value = ""; + } + + +} \ No newline at end of file From 15b7e077b4187b00349b08be864cb61c377943e3 Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Wed, 21 Jun 2017 17:11:18 +0100 Subject: [PATCH 07/15] modified nav-bar button to hover affect --- main.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/main.css b/main.css index 72e0b78..9999079 100644 --- a/main.css +++ b/main.css @@ -90,5 +90,11 @@ nav-bar button { background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ + box-shadow:2px 4px 8px 0 rgba(255, 255, 255, 0.5) + +} + +nav-bar button:hover { + box-shadow:12px 15px 20px 0 rgba(255, 255, 255, 0.5) } \ No newline at end of file From 33498f050ca5639b2a74e984ba33ce28d9c9b024 Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Wed, 21 Jun 2017 17:13:00 +0100 Subject: [PATCH 08/15] modified indentation --- main.css | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/main.css b/main.css index 9999079..519d766 100644 --- a/main.css +++ b/main.css @@ -2,7 +2,6 @@ font-family: 'Apple-Chancery', cursive; font-style: italic; font-size: 60px; - } .whiteFont { @@ -10,17 +9,14 @@ } .yellow { color: yellow; - } .red { color: #C91A44; - } .Italic { font-style: italic; - } .bordercontainer { @@ -33,7 +29,6 @@ padding-right: 5%; padding-bottom: 35%; padding-top: 2%; - } .submitbox { @@ -49,7 +44,6 @@ padding-right: 23%; flex-direction: column; justify-content: space-around; - } .submitform .width { @@ -90,11 +84,9 @@ nav-bar button { background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ - box-shadow:2px 4px 8px 0 rgba(255, 255, 255, 0.5) - + box-shadow:2px 4px 8px 0 rgba(255, 255, 255, 0.5) } nav-bar button:hover { - box-shadow:12px 15px 20px 0 rgba(255, 255, 255, 0.5) - + box-shadow:12px 15px 20px 0 rgba(255, 255, 255, 0.5) } \ No newline at end of file From 00c31ae1a49196fa96bc6c09e52ed66832425d7b Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Sat, 24 Jun 2017 20:13:18 +0100 Subject: [PATCH 09/15] Modified the format --- index.html | 6 ------ main.css | 5 +++++ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 3bc0476..60d1c88 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,6 @@ Web Developer Test - diff --git a/main.css b/main.css index 519d766..34647a9 100644 --- a/main.css +++ b/main.css @@ -4,6 +4,11 @@ font-size: 60px; } + body { + background-image: url("background.png"); + background-size: cover; +} + .whiteFont { color: white; } From dc71a071d7e13e2b89ccc8eaf84f2c4f35342848 Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Sat, 24 Jun 2017 20:27:31 +0100 Subject: [PATCH 10/15] Modified a wee bit formating --- main.js | 22 ++-------------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/main.js b/main.js index cc6b578..af96e22 100644 --- a/main.js +++ b/main.js @@ -14,14 +14,11 @@ function ShowHide(element) { } } - var MInfoButton = document.querySelector('.MInfo'); MInfoButton.addEventListener('click', MoreInFo); function MoreInFo() { ShowHide(document.querySelector('#moreInfo p')); - - } var submitButton = document.querySelector('.submitBtn'); @@ -43,30 +40,17 @@ function submitForm(event) { nameInput.className = 'nameInput inValid'; SubmitFormIsValid = false; } - // else { - // nameInput.className = 'nameInput'; - // nameInput.value = ""; - - // } if (emailInputWV.length === 0 || emailInputWV.indexOf('@') === -1) { emailInput.className = 'emailInput inValid'; SubmitFormIsValid = false; } - // else { - // emailInput.className = 'emailInput'; - // emailInput.value = ""; - // } + if (numberInputWV.length > 11) { numberInput.className = 'numberInput inValid'; SubmitFormIsValid = false; } - // else { - // numberInput.className = 'numberInput'; - // numberInput.value = ""; - - // } - + if (SubmitFormIsValid) { alert('Thanks for filling the form'); numberInput.className = 'numberInput'; @@ -78,6 +62,4 @@ function submitForm(event) { nameInput.className = 'nameInput'; nameInput.value = ""; } - - } \ No newline at end of file From 5826744de1ee3863e472b1c9deecc524dcd8cdfd Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Sun, 25 Jun 2017 16:29:54 +0100 Subject: [PATCH 11/15] Added API and get the news from API, it looks working --- index.html | 29 +++++++++++++------------- main.css | 2 +- main.js | 61 ++++++++++++++++++++++++++++++++++++++---------------- 3 files changed, 58 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index 60d1c88..d5a140f 100644 --- a/index.html +++ b/index.html @@ -23,10 +23,10 @@

About CYF

What We Do

- CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem - ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is - a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor - sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. + CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF + is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor + sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious + company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever.

Our focus

@@ -39,18 +39,17 @@

Our focus

News

- ❱ Show/Hide news item -
-

CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum - dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a - fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor - sit amet, whatever. CYF is a + ❱ Show/Hide news item +

+

CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor + sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious + company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. + CYF is a +

+
+

"I wanted to do something new and different. Sprite came to me with the idea. I thought it was cool. Withough + fans, there's no players. Can add so many things here. More topic will be welcome".

-
-

"I wanted to do something new and different. Sprite came to me with the idea. I thought it was cool. - Withough fans, there's no players. Can add so many things here. More topic will be welcome". -

-
diff --git a/main.css b/main.css index 34647a9..01d2d3d 100644 --- a/main.css +++ b/main.css @@ -94,4 +94,4 @@ nav-bar button { nav-bar button:hover { box-shadow:12px 15px 20px 0 rgba(255, 255, 255, 0.5) -} \ No newline at end of file +} diff --git a/main.js b/main.js index af96e22..a65442d 100644 --- a/main.js +++ b/main.js @@ -1,24 +1,45 @@ -var SHnews = document.querySelector('.shnews'); +var News = document.getElementById('News'); +var url = "https://private-e99507-kabaros.apiary-mock.com/news"; //server location +var ourRequest = new XMLHttpRequest(); +ourRequest.open('GET',url) + +ourRequest.onload = function() { +var newData = JSON.parse(ourRequest.responseText); +renderHTML(newData); +} +ourRequest.send(); + + +function renderHTML(data){ + var htmlString = ''; + for (i = 0; i < data.length; i++) { + htmlString += "

" + data[i].title + "

" + "

" + data[i].summary + "

"; + } + News.insertAdjacentHTML('beforeend',htmlString); +} + + +var SHnews = document.querySelector('#news-btn'); SHnews.addEventListener('click', ShowHideNews); function ShowHideNews() { - ShowHide(document.querySelector('#News')); + ShowHide(document.querySelector('#News')); } function ShowHide(element) { - if (element.className === "hidden") { - element.className = 'show'; - } else { - element.className = 'hidden'; - } + if (element.className === "hidden") { + element.className = 'show'; + } else { + element.className = 'hidden'; + } } var MInfoButton = document.querySelector('.MInfo'); -MInfoButton.addEventListener('click', MoreInFo); +MInfoButton.addEventListener('click', News); -function MoreInFo() { - ShowHide(document.querySelector('#moreInfo p')); +function News() { + ShowHide(document.querySelector('#News p')); } var submitButton = document.querySelector('.submitBtn'); @@ -39,27 +60,31 @@ function submitForm(event) { if (nameInputWV.length === 0) { nameInput.className = 'nameInput inValid'; SubmitFormIsValid = false; - } + } if (emailInputWV.length === 0 || emailInputWV.indexOf('@') === -1) { emailInput.className = 'emailInput inValid'; SubmitFormIsValid = false; - } - + } + if (numberInputWV.length > 11) { numberInput.className = 'numberInput inValid'; SubmitFormIsValid = false; - } - + } + if (SubmitFormIsValid) { alert('Thanks for filling the form'); numberInput.className = 'numberInput'; numberInput.value = ""; - + emailInput.className = 'emailInput'; emailInput.value = ""; - + nameInput.className = 'nameInput'; nameInput.value = ""; } -} \ No newline at end of file +} + + + + From b3c26a8bb3946f3f661ee8a0cd27f5984ac453d7 Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Sun, 25 Jun 2017 19:52:43 +0100 Subject: [PATCH 12/15] Just modified some varieables --- main.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/main.js b/main.js index a65442d..92f527a 100644 --- a/main.js +++ b/main.js @@ -1,14 +1,14 @@ var News = document.getElementById('News'); var url = "https://private-e99507-kabaros.apiary-mock.com/news"; //server location -var ourRequest = new XMLHttpRequest(); -ourRequest.open('GET',url) +var request = new XMLHttpRequest(); +request.open('GET',url) -ourRequest.onload = function() { -var newData = JSON.parse(ourRequest.responseText); +request.onload = function() { +var newData = JSON.parse(request.responseText); renderHTML(newData); } -ourRequest.send(); +request.send(); function renderHTML(data){ From f93f82b69eaece1a9b10f9de59bd2a81ab192773 Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Fri, 7 Jul 2017 13:18:25 +0100 Subject: [PATCH 13/15] modified variable names, changed % to em --- index.html | 10 +++++----- main.css | 38 +++++++++++++++++++------------------- main.js | 10 +++++----- 3 files changed, 29 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index d5a140f..3bcf149 100644 --- a/index.html +++ b/index.html @@ -12,18 +12,18 @@

CYF

- +

About CYF

What We Do

- CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF + CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. @@ -39,8 +39,8 @@

Our focus

News

- ❱ Show/Hide news item -
+ ❱ Show/Hide news item +

CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. CYF is a fictitious company-lorem ipsum dolor sit amet, whatever. diff --git a/main.css b/main.css index 01d2d3d..5e2eb7a 100644 --- a/main.css +++ b/main.css @@ -1,7 +1,7 @@ .heading { font-family: 'Apple-Chancery', cursive; font-style: italic; - font-size: 60px; + font-size: 60em; } body { @@ -25,24 +25,24 @@ } .bordercontainer { - /*border: 3px solid blue;*/ + /*border: 3em solid blue;*/ /*display: flex;*/ - margin-right: 29%; - margin-left: 3%; - margin-bottom: 3%; - padding-left: 5%; - padding-right: 5%; - padding-bottom: 35%; - padding-top: 2%; + margin-right: 29em; + margin-left: 3em; + margin-bottom: 3em; + padding-left: 5em; + padding-right: 5em; + padding-bottom: 35em; + padding-top: 2em; } .submitbox { - /*border: 4px solid hotpink;*/ + /*border: 4em solid hotpink;*/ padding-top: 1%; padding-bottom: 1%; } .submitform { - /*border: 2px solid yellow;*/ + /*border: 2em solid yellow;*/ display: flex; padding-bottom: 1%; padding-top: 2%; @@ -63,7 +63,7 @@ padding-left: 10%; } .biggertext { - font-size: 25px; + font-size: 25em; } .listIndentation { @@ -78,20 +78,20 @@ display: none; } -nav-bar button { +nav button { color: white; - font-size: 20px; - padding-left: 20px; - padding-right: 20px; + font-size: 20em; + padding-left: 20em; + padding-right: 20em; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */ background: #4c4c4c; /* Old browsers */ background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ - box-shadow:2px 4px 8px 0 rgba(255, 255, 255, 0.5) + box-shadow:2em 4em 8em 0 rgba(255, 255, 255, 0.5) } -nav-bar button:hover { - box-shadow:12px 15px 20px 0 rgba(255, 255, 255, 0.5) +nav button:hover { + box-shadow:12em 15em 20em 0 rgba(255, 255, 255, 0.5) } diff --git a/main.js b/main.js index 92f527a..096cdce 100644 --- a/main.js +++ b/main.js @@ -1,5 +1,5 @@ -var News = document.getElementById('News'); +var news = document.getElementById('News'); var url = "https://private-e99507-kabaros.apiary-mock.com/news"; //server location var request = new XMLHttpRequest(); request.open('GET',url) @@ -20,8 +20,8 @@ function renderHTML(data){ } -var SHnews = document.querySelector('#news-btn'); -SHnews.addEventListener('click', ShowHideNews); +var showHideNews = document.querySelector('#news-btn'); +showHideNews.addEventListener('click', ShowHideNews); function ShowHideNews() { ShowHide(document.querySelector('#News')); @@ -50,14 +50,14 @@ function submitForm(event) { event.preventDefault(); var nameInput = document.querySelector('#example-name-input'); - var nameInputWV = nameInput.value; + var nameInputWithValue = nameInput.value; var emailInput = document.querySelector('#example-email-input'); var emailInputWV = emailInput.value; var numberInput = document.querySelector('#example-phone-input'); var numberInputWV = numberInput.value; var SubmitFormIsValid = true; - if (nameInputWV.length === 0) { + if (nameInputWithValue.length === 0) { nameInput.className = 'nameInput inValid'; SubmitFormIsValid = false; } From c765fb249b65d1dfa3d74f29a725a2e60ee7e7ec Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Fri, 7 Jul 2017 21:41:57 +0100 Subject: [PATCH 14/15] Fixed the font sizes again --- main.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/main.css b/main.css index 5e2eb7a..f9ddacf 100644 --- a/main.css +++ b/main.css @@ -1,7 +1,7 @@ .heading { font-family: 'Apple-Chancery', cursive; font-style: italic; - font-size: 60em; + font-size: 5em; } body { @@ -80,9 +80,9 @@ nav button { color: white; - font-size: 20em; - padding-left: 20em; - padding-right: 20em; + font-size: 1em; + padding-left: 2em; + padding-right: 2em; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */ background: #4c4c4c; /* Old browsers */ background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */ From bc737740cd2df36124a0296a7d424ee5b25ec54e Mon Sep 17 00:00:00 2001 From: Won Maung Thein Date: Fri, 7 Jul 2017 22:14:16 +0100 Subject: [PATCH 15/15] added google font and modifited again --- index.html | 3 ++- main.js | 14 +++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 3bcf149..f459cf6 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Web Developer Test + @@ -53,7 +54,7 @@

News

-

More Information

+

More Information

For more information about our products and services, please contact us using the form below

Items marked * are required fields

diff --git a/main.js b/main.js index 096cdce..07f4dac 100644 --- a/main.js +++ b/main.js @@ -1,5 +1,5 @@ -var news = document.getElementById('News'); +var news = document.getElementById('news'); var url = "https://private-e99507-kabaros.apiary-mock.com/news"; //server location var request = new XMLHttpRequest(); request.open('GET',url) @@ -16,7 +16,7 @@ function renderHTML(data){ for (i = 0; i < data.length; i++) { htmlString += "

" + data[i].title + "

" + "

" + data[i].summary + "

"; } - News.insertAdjacentHTML('beforeend',htmlString); + news.insertAdjacentHTML('beforeend',htmlString); } @@ -24,7 +24,7 @@ var showHideNews = document.querySelector('#news-btn'); showHideNews.addEventListener('click', ShowHideNews); function ShowHideNews() { - ShowHide(document.querySelector('#News')); + ShowHide(document.querySelector('#news')); } function ShowHide(element) { @@ -35,11 +35,11 @@ function ShowHide(element) { } } -var MInfoButton = document.querySelector('.MInfo'); -MInfoButton.addEventListener('click', News); +var moreInfoButton = document.querySelector('.moreInfo'); +moreInfoButton.addEventListener('click', news); -function News() { - ShowHide(document.querySelector('#News p')); +function news() { + ShowHide(document.querySelector('#news p')); } var submitButton = document.querySelector('.submitBtn');