This repository was archived by the owner on Jan 3, 2023. It is now read-only.
Have added more details in HTML #2
There are no files selected for viewing
File renamed without changes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Web Developer Test</title> | ||
| <link rel="stylesheet" href="main.css"> | ||
| <link rel="stylesheet" href="//fonts.google.com/" > | ||
| </head> | ||
|
|
||
| <body class="whiteFont"> | ||
| <div class="bordercontainer"> | ||
| <header> | ||
| <h1 class="heading">CYF</h1> | ||
| </header> | ||
| <nav> | ||
| <button>Menu 1</button> | ||
| <button>Menu 2</button> | ||
| <button>Menu 3</button> | ||
| </nav> | ||
| <section> | ||
| <h2 class="aboutCYF red">About CYF</h2> | ||
| </section> | ||
| <article> | ||
| <h3>What We Do</h3> | ||
| <p> | ||
| <strong class="biggerText">CYF</strong> 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. | ||
| </p> | ||
| <h4 class="yellow">Our focus</h4> | ||
|
|
||
| <ul class="listIndentation"> | ||
| <li>Interactive</li> | ||
| <li>Mobile</li> | ||
| <li>Technology</li> | ||
| </ul> | ||
| <p class="yellow Italic">Click here to download a PDF of our recent work</p> | ||
| </article> | ||
| <article> | ||
| <h3>News</h3> | ||
| <span class="red showHideNews" id="news-btn" style="cursor:pointer">❱ Show/Hide news item</span> | ||
| <div id="news"></div> | ||
| <p>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 | ||
| </p> | ||
| <div class="indentedParagraph"> | ||
| <p>"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". | ||
| </p> | ||
| </div> | ||
| </article> | ||
| <section id="moreInfo"> | ||
| <h3 class="moreInfo" style="cursor:pointer">More Information</h3> | ||
| <p>For more information about our products and services, please contact us using the form below</p> | ||
| <p>Items marked * are required fields</p> | ||
| </section> | ||
| <div class="submitbox"> | ||
| <form class="submitform"> | ||
| <label>Contact name *:</label><br> | ||
| <input class="width nameInput" id="example-name-input" type="text" placeholder=""><br> | ||
| <label>Contact email address *:</label><br> | ||
| <input class="emailInput" id="example-email-input" type="email" placeholder=""><br> | ||
| <label>Contact phone number: </label><br> | ||
| <input class="numberInput" id="example-phone-input" type="tel" placeholder=""><br> | ||
| </form> | ||
| </div> | ||
| <button class="buttonSize submitBtn">Submit</button> | ||
| </div> | ||
|
|
||
| <script src="./main.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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() { | ||
|
Contributor
There was a problem hiding this comment. very nice usage of onload (make sure the code is indented properly though) |
||
| var newData = JSON.parse(request.responseText); | ||
| renderHTML(newData); | ||
| } | ||
| request.send(); | ||
|
|
||
|
|
||
| function renderHTML(data){ | ||
| var htmlString = ''; | ||
| for (i = 0; i < data.length; i++) { | ||
| htmlString += "<p>" + data[i].title + "</p>" + "<p>" + data[i].summary + "</p>"; | ||
| } | ||
| 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'; | ||
|
Contributor
There was a problem hiding this comment. this is correct for the requirement .. Now look into Regular Expressions. See how can you find a RegExp that validates emails. Regular expressions can be quite frightening but at least know how to use them, and understand what they're used for. |
||
| 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 = ""; | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this font will probably only work on your machine - you can import Google fonts to ensure that the font is loaded for all users https://fonts.google.com/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you so much for all your help. I am not very sure how to put all google fonts.. Please help me.. Thanks..