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 new file mode 100644 index 0000000..f459cf6 --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + + + + + + Web Developer Test + + + + + +
+
+

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. Can add so many things here. More topic will be welcome". +

+
+
+
+

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 new file mode 100644 index 0000000..f9ddacf --- /dev/null +++ b/main.css @@ -0,0 +1,97 @@ +.heading { + font-family: 'Apple-Chancery', cursive; + font-style: italic; + font-size: 5em; +} + + body { + background-image: url("background.png"); + background-size: cover; +} + +.whiteFont { + color: white; +} +.yellow { + color: yellow; +} + +.red { + color: #C91A44; +} + +.Italic { + font-style: italic; +} + +.bordercontainer { + /*border: 3em solid blue;*/ + /*display: flex;*/ + margin-right: 29em; + margin-left: 3em; + margin-bottom: 3em; + padding-left: 5em; + padding-right: 5em; + padding-bottom: 35em; + padding-top: 2em; +} + +.submitbox { + /*border: 4em solid hotpink;*/ + padding-top: 1%; + padding-bottom: 1%; +} +.submitform { + /*border: 2em 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: 2%; +} + +.indentedParagraph { + /*border: solid rebeccapurple;*/ + padding-left: 10%; +} +.biggertext { + font-size: 25em; +} + +.listIndentation { + margin-left: -4%; +} + +.inValid { + background-color : rebeccapurple; +} + +.hidden { + display: none; +} + +nav button { + color: white; + 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 */ + 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:2em 4em 8em 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 new file mode 100644 index 0000000..07f4dac --- /dev/null +++ b/main.js @@ -0,0 +1,90 @@ + +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) + +request.onload = function() { +var newData = JSON.parse(request.responseText); +renderHTML(newData); +} +request.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 showHideNews = document.querySelector('#news-btn'); +showHideNews.addEventListener('click', ShowHideNews); + +function ShowHideNews() { + ShowHide(document.querySelector('#news')); +} + +function ShowHide(element) { + if (element.className === "hidden") { + element.className = 'show'; + } else { + element.className = 'hidden'; + } +} + +var moreInfoButton = document.querySelector('.moreInfo'); +moreInfoButton.addEventListener('click', news); + +function news() { + ShowHide(document.querySelector('#news p')); +} + +var submitButton = document.querySelector('.submitBtn'); + +submitButton.addEventListener('click', submitForm); + +function submitForm(event) { + event.preventDefault(); + + var nameInput = document.querySelector('#example-name-input'); + 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 (nameInputWithValue.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 = ""; + } +} + + + +