This repository was archived by the owner on Jan 3, 2023. It is now read-only.
Web Developer Test #1
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
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,153 @@ | ||
| /*============ Start Global ==============*/ | ||
| body{ | ||
| color: #cccccc; | ||
| font-family: 'Philosopher', sans-serif; | ||
| text-align: left; | ||
| } | ||
| *{ | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| .container{ | ||
| width: 85%; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
| .body-content{ | ||
| background-image: url('../images/containtBackground.png'); | ||
| -webkit-background-size: cover; | ||
| -moz-background-size: cover; | ||
| -o-background-size: cover; | ||
| background-size: cover; | ||
| background-repeat: no-repeat; | ||
| padding: 0 1em; | ||
| padding-bottom: 2em; | ||
| } | ||
| /*============ Start Header ==============*/ | ||
| .logo{ | ||
| padding: .6em 0 .8em 0.5em; | ||
| font-size: 4em; | ||
| } | ||
| nav .links{ | ||
| list-style: none; | ||
| margin-bottom: 1em; | ||
| } | ||
| nav .links li{ | ||
| display: inline-block; | ||
| } | ||
| nav .links li a{ | ||
| text-decoration: none; | ||
| background: #131313; | ||
| color: #fff; | ||
| padding: .2em 1em; | ||
| font-size: 1em; | ||
| box-shadow: 0 -0.2em 0.1em #e2d3d3; | ||
| } | ||
| /*=============== first article ==============*/ | ||
| article .about-cyf{ | ||
| color: #e91a57; | ||
| margin-bottom: .5em; | ||
| font-size: 2em; | ||
| margin-top: 0.8em; | ||
| } | ||
| article .what-we-do{ | ||
| margin-bottom: 0.6em; | ||
| } | ||
| article .cyf-devintion{ | ||
| line-height: 1.6em; | ||
| margin-bottom: 1em; | ||
| margin-right: 5em; | ||
| } | ||
| article .our-focus{ | ||
| color: #ebdd00; | ||
| margin-bottom: 0.6em; | ||
| } | ||
| article .links{ | ||
| color: #fff; | ||
| margin-left: 2em; | ||
| } | ||
| article .footer{ | ||
| color: #ebdd00; | ||
| margin: 2em 0; | ||
| } | ||
| article .footer >a{ | ||
| text-decoration: none; | ||
| color: #fff; | ||
| } | ||
| /*================= Second article ======================*/ | ||
| article .news{ | ||
| margin-bottom: .8em; | ||
| } | ||
| .hiddenShow{ | ||
| display: none; | ||
| } | ||
|
|
||
| article #showAndHide{ | ||
| cursor: pointer; | ||
| } | ||
| article .showHideHeader{ | ||
| color: #e91a57; | ||
| margin-bottom: .5em; | ||
| } | ||
| article .news-first-pragraph{ | ||
| margin-right: 5em; | ||
| } | ||
| article .news-second-pragraph{ | ||
| margin: 1em 0 0 4em; | ||
| } | ||
| /*================= Start Section ======================*/ | ||
| section h1:first-child{ | ||
| margin: .8em 0; | ||
| } | ||
| section .note{ | ||
| margin-bottom: 1.5em; | ||
| } | ||
| section .required-field{ | ||
| margin: .8em 0; | ||
| } | ||
| .error{ | ||
| background: #f00; | ||
| } | ||
| section form input[type='text']{ | ||
| padding: .4em .5em; | ||
| margin: .5em 0; | ||
| } | ||
| section form input[type='email']{ | ||
| padding: .4em 10em .4em .5em; | ||
| margin: .5em 0; | ||
| } | ||
| section form input[type='number']{ | ||
| padding: .4em 10em .4em .5em; | ||
| margin: 5px 0; | ||
| } | ||
| section form button{ | ||
| padding: .3em .4em; | ||
| margin: .5em 0; | ||
| } | ||
| /*=============== Media query ================*/ | ||
| @media (max-width : 39em){ | ||
| nav .links li a{ | ||
| padding: .3em .3em; | ||
| } | ||
| section form input[type='email'], | ||
| section form input[type='number']{ | ||
| padding: .4em 6em .4em .5em; | ||
| } | ||
| /*============ Max-wdth 592 =============*/ | ||
| } | ||
| @media (max-width : 59.2em){ | ||
| .container{ | ||
| width: 100%; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
| article .cyf-devintion{ | ||
| margin-right: 0; | ||
| } | ||
| article .news-first-pragraph{ | ||
| margin-right: 0; | ||
| } | ||
| article .news-second-pragraph{ | ||
| margin: 1.5em 0 1.5em 1em; | ||
| } | ||
| } |
Binary file not shown.
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,82 @@ | ||
| <!Doctype HTML> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>CYF-WDT</title> | ||
| <meta charset="utf-8"> | ||
| <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> | ||
| <link rel="stylesheet" href="css/style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="body-content"> | ||
| <h1 class="logo" id="headLogo">CYF</h1> | ||
| <nav> | ||
| <ul class="links"> | ||
| <li><a href="#">Menu 1</a></li> | ||
| <li><a href="#">Menu 2</a></li> | ||
| <li><a href="#">Menue 2</a></li> | ||
| </ul> | ||
| </nav> | ||
| <article> | ||
| <h1 class="about-cyf">About CYF</h1> | ||
| <h2 class="what-we-do">What We Do</h2> | ||
| <p class="cyf-devintion"> | ||
| <strong>CYF</strong> is a long established fact that a reader will be distracted by the readable content | ||
| of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal | ||
| distribution of letters, as opposed to using 'Content here, content here', making it look like readable | ||
| English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model | ||
| text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions | ||
| have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like. | ||
| </p> | ||
| <h3 class="our-focus">Our focus</h3> | ||
| <ul class="links"> | ||
| <li>Interactive</li> | ||
| <li>Mobile</li> | ||
| <li>Technology</li> | ||
| </ul> | ||
| <h4 class="footer">Clich<a href="#"> here </a>to download a PDF of our recent work</h4> | ||
| </article> | ||
|
|
||
| <article> | ||
| <h1 class="news">News</h1> | ||
| <h2 class="showHideHeader"> >> <span id="showAndHide">Show/Hide</span> news item</h2> | ||
| <div> | ||
| <p class="news-first-pragraph"> | ||
| There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by | ||
| injected humour, or randomised words which don't look even slightly believable. If you are going to use | ||
| a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle | ||
| of text. All the Lorem Ipsum generators on the Internet. | ||
| </p> | ||
| <p class="news-second-pragraph"> | ||
| "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. | ||
| The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed | ||
| sometimes by accident, sometimes on purpose (injected humour and the like." | ||
| </p><br> | ||
| <div id="resivedNews" class="hiddenShow"> | ||
|
|
||
| </div><br> | ||
| </div> | ||
| </article> | ||
| <section> | ||
| <h1>More Information</h1> | ||
| <h4 class="note"> | ||
| For more information about our product and services, please contact us using the for below. | ||
| </h4> | ||
| <h5 class="required-field">Items market * are required field</h5> | ||
| <form action="index.html" method="post"> | ||
| <label>Conatct name *.</label><br> | ||
| <input type="text" id="name" value="" placeholder="Inter Your name" required><br> | ||
| <label>Conatct email address *.</label><br> | ||
| <input type="email" id="email" value="" placeholder="Inter Your Email" required ><br> | ||
| <span></span> | ||
| <label>Conatct phone number *.</label><br> | ||
| <input type="number" id="phoneNumber" value="" placeholder="phone number"><br> | ||
| <span></span> | ||
| <button type="submit" id="submitForm">Submit</button> | ||
| </form> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| <script src="js/customer.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,73 @@ | ||
| /*================= Form validation =================*/ | ||
| window.addEventListener('load', function () { | ||
| submitForm.addEventListener('click', function (event) { | ||
| event.preventDefault(); | ||
| const name = document.getElementById('name'); | ||
| const email = document.getElementById('email'); | ||
| const phoneNumber = document.getElementById('phoneNumber'); | ||
| function validName(name) { | ||
| return name.value !== ""; | ||
| } | ||
| function validEmail(email) { | ||
| const pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; | ||
| return pattern.test(email.value); | ||
| } | ||
| function validPhoneNumber(phoneNumber) { | ||
| return phoneNumber.value !== "" && phoneNumber.value.length < 12; | ||
| } | ||
| if (validName(name) && validName(name) && validPhoneNumber(phoneNumber)) { alert('Thank you for register with us')} | ||
|
|
||
| if (validName(name)) { | ||
| return true; | ||
| name.classList.remove('error'); | ||
| }else{ | ||
| name.classList.add('error'); | ||
| } | ||
|
|
||
| if (validName(name)) { | ||
| alert('yeas'); | ||
| return true; | ||
| email.classList.remove('error'); | ||
| }else{ | ||
| email.classList.add('error'); | ||
| } | ||
|
|
||
| if (validPhoneNumber(phoneNumber)) { | ||
| phoneNumber.classList.remove('error'); | ||
| return true; | ||
| }else{ | ||
| phoneNumber.classList.add('error'); | ||
| } | ||
|
|
||
| }); | ||
| }, false); | ||
| /*==================== Start AJAX Get Data===================*/ | ||
| window.addEventListener('load', function () { | ||
| const resivedNews = document.getElementById('resivedNews'); | ||
|
|
||
| const request = new XMLHttpRequest(); | ||
| request.onreadystatechange = function () { | ||
| if (request.readyState === 4 ){ | ||
| if (request.status === 200) { | ||
| const data = JSON.parse(request.responseText); | ||
| for (i = 0; i < data.length; i++) { | ||
| resivedNews.innerHTML += "<h2>"+data[i].title+"</h2>"+"<br>"+ "<p>"+data[i].summary+".</p><br>"; | ||
| } | ||
| }else { | ||
| resivedNews.innerHTML = 'An error occurred during your request: '; | ||
| } | ||
| } | ||
| } | ||
| const url = "https://private-e99507-kabaros.apiary-mock.com/news"; | ||
| request.open("GET", url); | ||
| request.send(); | ||
| const showAndHide = document.querySelector('#showAndHide'); | ||
| showAndHide.addEventListener('click', function (event) { | ||
| event.preventDefault(); | ||
| resivedNews.classList.toggle('hiddenShow'); | ||
|
|
||
| }); | ||
| }); | ||
|
|
||
|
|
||
|
|
||
|
|
||
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.
good class names - you are very consistent (using lower case and dashes all the time). This is very good and important.