From 85f43cf62f52113687dffd4edefc5bdf266e928f Mon Sep 17 00:00:00 2001 From: khaled Date: Sun, 25 Jun 2017 18:05:18 +0100 Subject: [PATCH 1/4] I finished wrting the css and the html code, I have to write the valid js --- assets/arrow.PNG | Bin 0 -> 318 bytes index.html | 108 ++++++++++++++++++++++++++++++++ js/main.js | 0 style.css | 158 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 266 insertions(+) create mode 100644 assets/arrow.PNG create mode 100644 index.html create mode 100644 js/main.js create mode 100644 style.css diff --git a/assets/arrow.PNG b/assets/arrow.PNG new file mode 100644 index 0000000000000000000000000000000000000000..45981e86f11916875b6a186e9a76ab034db32807 GIT binary patch literal 318 zcmeAS@N?(olHy`uVBq!ia0vp^%0R5c!3HGX_cQhYDaPU;cPEB*=VV?2IV|apzK#qG z8~eHcB(eheoCO|{#S9F5he4R}c>anMpx|Xs7srqY_qSI9xeht-FkGzS)qnQa-quw# z`=D?7$gkR-)}MW^zP^o3zlxU*mSYUFtpOg zB)GxQwL59?Or{>qC=uziA_-f7&?e`-;n8CDV~4*@J6_E0#_h&^Or-Yd#*03T$3%3y zdegYJef;D$zc%W*)@Ik+6>({e8v}pZ21qw-6coRhl*Mcig#xYW{*?cl``M`W^z5%e e_l_?6$@o`1d@ + + + + Code Your Future | CYF + + + + + + + + +
+

CYF

+ +
+ + + +
+
About CYF
+ +
+
+ What We Do +
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it + to make a type specimetially unchanged. It was popularised in the 1960s with the release of Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus + PageMaker including versions of Lorem IpsumIpsumIt has survived not only five centuries, but also the leap into electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus + PageMaker including versions of Lorem Ipsum.

+
+ + + + + +
+
+ News +
+
    +
  • Show/Hide news items
    • +
  • specimetially unchanged. It was popularised in the 1960s with the release of Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus + PageMaker including versions of Lorem
    • +
  • specimetially unchanged. It was popularised in the 1960s with the release of Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus + PageMaker including versions of Lorem
    • +
+
+ + +
+

+ More information +

+

+ For more information about our product and services, Please contact us the form below. +

+

Items marked * are required fields

+ +
+
+
+
+
+ +
+
+ + +
+ +
+
+ + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..4c7c1cd --- /dev/null +++ b/style.css @@ -0,0 +1,158 @@ +body{ + margin: 3%; + background-image: url("assets/background.png"); + background-repeat: no-repeat; + background-size:cover; +} +.website-title{ + color:white; + font-size: 57px; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + nav .links li{ + display: inline-block; +} +ul.links a{ + color:white; + text-decoration: none; + display:inline-block; + text-align: center; + background:-webkit-linear-gradient(white 5%, gray 10%, #141414 80%, black 10%); + background-color:black; + color: white; + width: 150px; + height: 30px; + margin: 1px; + border-bottom: none; + border-right: none; + border-top: none; + border-left-width: 1px; + font-size: 20px; + margin-bottom: 20px; +} + +a { + text-decoration: none !important; +} + +/* header style */ + +.articles .title{ + clear: left; + font-family: sans-serif; + font-size:3em; + color:#E51955; + margin-bottom: 20px; +} + +.news .title{ + clear: left; + font-family: sans-serif; + font-size:3em; + color:grey; + margin-bottom: 20px; +} + +.Information .title{ + clear: left; + font-family: sans-serif; + font-size:3em; + color:grey; + margin-bottom: 20px; +} + +.article1 .article-title{ + color: white; + font-size: 2em; + font-family: sans-serif; +} + +.article2 .article-title{ + color: yellow; + font-size: 2em; + font-family: sans-serif; +} + +.article1-body{ + font-family: sans-serif; + color: white; + font-size: 1em; +} + +.article-body-item{ + color: white; + font-size: 26px; +} + +.dropdown-menu{ + color:#E51955; + font-size:1.5em; +} + +.new .title{ + color: white; + font-size: 26px; +} + +.information .title{ + color: white; + font-size: 26px; +} + +.body{ + color: white; + font-size: 16px; +} +.form-body{ + color: white; + font-size: 16px;} +/* Articles style */ +div#main.articles { + display: block; + width:75%; +} + + +a#drop{ + + color:#E51955; + font-size:1em; + background-image: url('assets/arrodw.png'); + background-position: left no-repeat; + + +} + +a#drop:before { + display: inline-block; + +content: url('assets/arrow.png'); + +} + + +#drop1{ + color:white; + font-size: 18px; + font-family: sans-serif; +} + +#drop2{ + color:white; + font-size: 18px; + font-family: sans-serif; + margin-left: 120px; +} +/* Form style */ +form{ + color: white; +} +#useremail , #userphone{ + width: 300px; +} From 66d4ad86c8af7385fbc922b6a45182e590aa482e Mon Sep 17 00:00:00 2001 From: khaled Date: Wed, 5 Jul 2017 20:38:41 +0100 Subject: [PATCH 2/4] I fixed the html code and also added the form validation --- index.html | 50 ++++++++++++++------------ js/main.js | 0 jsfuck.js | 21 +++++++++++ main.js | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 50 ++++++++++++++++++++------ 5 files changed, 189 insertions(+), 33 deletions(-) delete mode 100644 js/main.js create mode 100644 jsfuck.js create mode 100644 main.js diff --git a/index.html b/index.html index bbbb1a7..ce2370e 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,18 @@ - + Code Your Future | CYF - + + -
+

CYF

+ +
@@ -86,21 +91,22 @@

Items marked * are required fields

-
-
-
-
-
- -
-
- - -
+
+
+
+
+
+ +
+
+ + +
- + + diff --git a/js/main.js b/js/main.js deleted file mode 100644 index e69de29..0000000 diff --git a/jsfuck.js b/jsfuck.js new file mode 100644 index 0000000..90ea752 --- /dev/null +++ b/jsfuck.js @@ -0,0 +1,21 @@ +function HandlesStuff(inputRecord, savedrecord, income, expenseType, revenue, expense0, expense1, expense2, screenx, screeny, success) { + + var i; + for (i = 0; i < 100; i++) { + inputRecord[i] = 0; + } + + updateCorpDatabase(savedrecord); + income[0] = income[1] * 4.0 / quarter; + + if (expenseType == 0) { + profit = revenue - expense[0]; + } + else if (expenseType == 1) { + profit = revenue - expense[1]; + } + + else if (expenseType == 2) { + profit = revenue - expense[2]; + } +} \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..62b4974 --- /dev/null +++ b/main.js @@ -0,0 +1,101 @@ + +//Show and Hide The news Sections +var controlElement = document.querySelector('#show'); +controlElement.addEventListener('click', showHide); +var content = document.querySelector('#mybutton'); +function showHide(event) { + event.preventDefault(); + if (content.className === "hide") { + content.className = ""; + } + else { + content.className = "hide"; + } +} + + + + +//Form Selectors // + +var userEmail = document.querySelector('#useremail'); +var userName = document.querySelector('#username'); +var userPhone = document.querySelector('#userphone'); + +var sbumitButton = document.querySelector('#submit-input'); +sbumitButton.addEventListener('click', submitForm); + +function submitForm(event) { + event.preventDefault(); + verifyUserEmail(); + verifyUserName(); + verifyUserPhone(); + if (verifyUserEmail() && verifyUserName() && verifyUserPhone()) { + userEmail.value = ""; + userName.value = ""; + userPhone.value = ""; + alert('Thanks'); + +} +} + +function verifyUserName() { + if (userName.value.length <= 0 ) { + userName.style.backgroundColor = "red"; + } + else { + userName.style.backgroundColor = "white"; + return true; + } +} + +function verifyUserPhone() { + if ( userPhone.value.length < 11 && userPhone.value.length > 0 ) { + userPhone.style.backgroundColor = "white"; + return true; + } + else { + userPhone.style.backgroundColor = "red"; + return false; + } +} + +function verifyUserEmail() { + if (userEmail.value.length <= 0 || textEmail.value.indexOf('@') < 0 ) { + userEmail.style.backgroundColor = "red"; + } + else { + userEmail.style.backgroundColor = "white"; + return true; + } +} + + +// AJAX REQUEST + +var xhrcontent = document.getElementsByClassName(content); +var request = new XMLHttpRequest(); //creating a request object + + request.onreadystatechange = function() { + if(request.readyState === 4) { // check if a response was sent back + if(request.status === 200) { // check if request was successful + var array = JSON.parse(request.responseText); + for (var i = 0; i < array.length; i++) { + var ajaxNewsTitle = document.createElement("p"); + ajaxNewsTitle.innerText = array[i].title; // the ajax request title name + ajaxNewsTitle.className += 'ajaxTitle'; + content.appendChild(ajaxNewsTitle); + var ajaxNewsSummary = document.createElement("p"); + ajaxNewsSummary.innerText = array[i].summary; + ajaxNewsSummary.className += 'ajaxSummary'; + content.appendChild(ajaxNewsSummary);} + } else { + alert('An error occurred during your request: ' + request.status + ' ' + request.statusText); + } + } + } + + var url = "https://private-e99507-kabaros.apiary-mock.com/news"; //server location + request.open("GET", url); // adding it to the request +request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info +request.send(); // sending the request \ No newline at end of file diff --git a/style.css b/style.css index 4c7c1cd..5b38be5 100644 --- a/style.css +++ b/style.css @@ -7,8 +7,8 @@ body{ .website-title{ color:white; font-size: 57px; + font-family:Monotype Corsiva, Times, serif; } - ul { list-style-type: none; margin: 0; @@ -36,11 +36,9 @@ ul.links a{ font-size: 20px; margin-bottom: 20px; } - a { text-decoration: none !important; } - /* header style */ .articles .title{ @@ -87,7 +85,7 @@ a { .article-body-item{ color: white; - font-size: 26px; + font-size: 20px; } .dropdown-menu{ @@ -118,20 +116,25 @@ div#main.articles { width:75%; } +.hide{ +display: none; +} -a#drop{ +a{ color:#E51955; - font-size:1em; - background-image: url('assets/arrodw.png'); + font-size:1.2em; + background-position: left no-repeat; } -a#drop:before { +a#show:before { display: inline-block; - + position: relative; + top: 15px; + content: url('assets/arrow.png'); } @@ -144,15 +147,40 @@ content: url('assets/arrow.png'); } #drop2{ - color:white; - font-size: 18px; + color: whitesmoke; + font-size: 16px; font-family: sans-serif; margin-left: 120px; } + +.ajaxTitle{ +color: grey; + font-size: 22px; + font-family: sans-serif; + margin-bottom: -11px; + +} + +.ajaxSummary{ +color: whitesmoke; + font-size: 16px; + font-family: sans-serif; + margin-left: 44px; +} /* Form style */ form{ color: white; } + #useremail , #userphone{ width: 300px; } + +.content{ +display: none; +} + +.content.active, +.no-js .showhide { + display: block; +} \ No newline at end of file From c1f7c3347e80244f827f40e17f9a8dd035cdb23b Mon Sep 17 00:00:00 2001 From: khaled Date: Wed, 5 Jul 2017 21:01:35 +0100 Subject: [PATCH 3/4] deleted an extra file --- jsfuck.js | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 jsfuck.js diff --git a/jsfuck.js b/jsfuck.js deleted file mode 100644 index 90ea752..0000000 --- a/jsfuck.js +++ /dev/null @@ -1,21 +0,0 @@ -function HandlesStuff(inputRecord, savedrecord, income, expenseType, revenue, expense0, expense1, expense2, screenx, screeny, success) { - - var i; - for (i = 0; i < 100; i++) { - inputRecord[i] = 0; - } - - updateCorpDatabase(savedrecord); - income[0] = income[1] * 4.0 / quarter; - - if (expenseType == 0) { - profit = revenue - expense[0]; - } - else if (expenseType == 1) { - profit = revenue - expense[1]; - } - - else if (expenseType == 2) { - profit = revenue - expense[2]; - } -} \ No newline at end of file From 27b71728fee2278651cbd2faddbf02257a804ace Mon Sep 17 00:00:00 2001 From: khaled Date: Sun, 9 Jul 2017 21:13:29 +0100 Subject: [PATCH 4/4] I have fixed the comments that has been made by Mozafer --- index.html | 28 +++----------------- main.js | 54 ++++++++++++++++++-------------------- style.css | 76 ++++++++++++++++++++++-------------------------------- 3 files changed, 59 insertions(+), 99 deletions(-) diff --git a/index.html b/index.html index ce2370e..210b6de 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,10 @@ - Code Your Future | CYF - - - + - - - -

CYF

- -
About CYF
@@ -41,7 +32,6 @@

CYF

sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

- -
News -
- - +

Show/Hide news items

-
+

specimetially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem

@@ -77,11 +64,8 @@

CYF

sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem

- -
-

More information @@ -90,7 +74,6 @@

For more information about our product and services, Please contact us the form below.

Items marked * are required fields

-


@@ -102,13 +85,8 @@

-

- - - - \ No newline at end of file diff --git a/main.js b/main.js index 62b4974..1231ef8 100644 --- a/main.js +++ b/main.js @@ -2,20 +2,17 @@ //Show and Hide The news Sections var controlElement = document.querySelector('#show'); controlElement.addEventListener('click', showHide); -var content = document.querySelector('#mybutton'); +var content = document.querySelector('#ajaxContent'); function showHide(event) { event.preventDefault(); if (content.className === "hide") { content.className = ""; } - else { + else { content.className = "hide"; } } - - - //Form Selectors // var userEmail = document.querySelector('#useremail'); @@ -26,21 +23,20 @@ var sbumitButton = document.querySelector('#submit-input'); sbumitButton.addEventListener('click', submitForm); function submitForm(event) { - event.preventDefault(); - verifyUserEmail(); - verifyUserName(); - verifyUserPhone(); - if (verifyUserEmail() && verifyUserName() && verifyUserPhone()) { + event.preventDefault(); + var isEmailVaild = verifyUserEmail(); + var isUserVaild = verifyUserName(); + var isPhoneVaild = verifyUserPhone(); + if (isEmailVaild && isUserVaild && isPhoneVaild) { userEmail.value = ""; userName.value = ""; userPhone.value = ""; alert('Thanks'); - -} + } } function verifyUserName() { - if (userName.value.length <= 0 ) { + if (!userName.value) { userName.style.backgroundColor = "red"; } else { @@ -50,7 +46,7 @@ function verifyUserName() { } function verifyUserPhone() { - if ( userPhone.value.length < 11 && userPhone.value.length > 0 ) { + if (userPhone.value.length < 11 && userPhone.value.length > 0) { userPhone.style.backgroundColor = "white"; return true; } @@ -61,8 +57,9 @@ function verifyUserPhone() { } function verifyUserEmail() { - if (userEmail.value.length <= 0 || textEmail.value.indexOf('@') < 0 ) { + if (userEmail.value.length <= 0 || userEmail.value.indexOf('@') < 0) { userEmail.style.backgroundColor = "red"; + return false } else { userEmail.style.backgroundColor = "white"; @@ -75,11 +72,10 @@ function verifyUserEmail() { var xhrcontent = document.getElementsByClassName(content); var request = new XMLHttpRequest(); //creating a request object - - request.onreadystatechange = function() { - if(request.readyState === 4) { // check if a response was sent back - if(request.status === 200) { // check if request was successful - var array = JSON.parse(request.responseText); +request.onreadystatechange = function () { + if (request.readyState === 4) { // check if a response was sent back + if (request.status === 200) { // check if request was successful + var array = JSON.parse(request.responseText); for (var i = 0; i < array.length; i++) { var ajaxNewsTitle = document.createElement("p"); ajaxNewsTitle.innerText = array[i].title; // the ajax request title name @@ -88,14 +84,14 @@ var request = new XMLHttpRequest(); //creating a request object var ajaxNewsSummary = document.createElement("p"); ajaxNewsSummary.innerText = array[i].summary; ajaxNewsSummary.className += 'ajaxSummary'; - content.appendChild(ajaxNewsSummary);} - } else { - alert('An error occurred during your request: ' + request.status + ' ' + request.statusText); - } - } - } - - var url = "https://private-e99507-kabaros.apiary-mock.com/news"; //server location - request.open("GET", url); // adding it to the request + content.appendChild(ajaxNewsSummary); + } + } else { + alert('An error occurred during your request: ' + request.status + ' ' + request.statusText); + } + } +} +var url = "https://private-e99507-kabaros.apiary-mock.com/news"; //server location +request.open("GET", url); // adding it to the request request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info request.send(); // sending the request \ No newline at end of file diff --git a/style.css b/style.css index 5b38be5..699e1c0 100644 --- a/style.css +++ b/style.css @@ -10,12 +10,11 @@ body{ font-family:Monotype Corsiva, Times, serif; } ul { - list-style-type: none; + list-style-type: none; margin: 0; padding: 0; } - - nav .links li{ +nav .links li{ display: inline-block; } ul.links a{ @@ -37,7 +36,7 @@ ul.links a{ margin-bottom: 20px; } a { - text-decoration: none !important; + text-decoration: none; } /* header style */ @@ -50,7 +49,7 @@ a { } .news .title{ - clear: left; + clear: left; font-family: sans-serif; font-size:3em; color:grey; @@ -58,7 +57,7 @@ a { } .Information .title{ - clear: left; + clear: left; font-family: sans-serif; font-size:3em; color:grey; @@ -66,25 +65,25 @@ a { } .article1 .article-title{ - color: white; + color: white; font-size: 2em; font-family: sans-serif; } .article2 .article-title{ - color: yellow; + color: yellow; font-size: 2em; font-family: sans-serif; } .article1-body{ - font-family: sans-serif; + font-family: sans-serif; color: white; font-size: 1em; } .article-body-item{ - color: white; + color: white; font-size: 20px; } @@ -94,22 +93,24 @@ a { } .new .title{ - color: white; + color: white; font-size: 26px; } .information .title{ - color: white; + color: white; font-size: 26px; } .body{ - color: white; + color: white; font-size: 16px; } .form-body{ - color: white; + color: white; font-size: 16px;} + + /* Articles style */ div#main.articles { display: block; @@ -117,70 +118,55 @@ div#main.articles { } .hide{ -display: none; + display: none; } a{ - - color:#E51955; + color:#E51955; font-size:1.2em; - - background-position: left no-repeat; - - + background-position: left no-repeat; } a#show:before { display: inline-block; position: relative; top: 15px; - -content: url('assets/arrow.png'); - + content: url('assets/arrow.png'); } - - #drop1{ color:white; font-size: 18px; - font-family: sans-serif; + font-family: sans-serif; } - #drop2{ color: whitesmoke; font-size: 16px; - font-family: sans-serif; - margin-left: 120px; + font-family: sans-serif; + margin-left: 120px; } - .ajaxTitle{ -color: grey; - font-size: 22px; + color: grey; + font-size: 22px; font-family: sans-serif; - margin-bottom: -11px; - + margin-bottom: -11px; } - .ajaxSummary{ -color: whitesmoke; - font-size: 16px; + color: whitesmoke; + font-size: 16px; font-family: sans-serif; margin-left: 44px; } /* Form style */ form{ - color: white; + color: white; } - #useremail , #userphone{ - width: 300px; + width: 300px; } - .content{ -display: none; + display: none; } - .content.active, .no-js .showhide { - display: block; + display: block; } \ No newline at end of file