Skip to content
This repository was archived by the owner on Jan 3, 2023. It is now read-only.

Reviweing WebDeveloperTest #10

Open
khaledkzy wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Reviweing WebDeveloperTest #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
85f43cf
I finished wrting the css and the html code, I have to write the vali…
Jun 25, 2017
66d4ad8
I fixed the html code and also added the form validation
Jul 5, 2017
c1f7c33
deleted an extra file
Jul 5, 2017
27b7172
I have fixed the comments that has been made by Mozafer
Jul 9, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/arrow.PNG
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 92 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<title>Code Your Future | CYF</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container1">
<h1 class="website-title">CYF</h1>
<nav>
<ul class="links">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
</div>
<!-- Articles-->
<div id="main" class="articles">
<div class="title"> About CYF</div>
<!--First Article-->
<article class="article1">
<div class="article-title ">
What We Do
</div>
<p class="article1-body">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. </p>
</article>
<!--Second Article-->
<article class="article2">
<div class="article-title "> Our focus </div>
<ul class="article2-list">
<li class="article-body-item ">
Interactive
</li>
<li class="article-body-item">
Mobile
</li>
<li class="article-body-item">
Technology
</li>
</ul>
<p class="download">
<a href="#">Click here to download a pdf for our recent work </a>
</p>
</article>
<!--News-->
<div class="news">
<div class="title ">
News
</div>
<p><a href="#" id="show">Show/Hide news items</a></p>
<div class="content" id="ajaxContent">
<p id="drop1">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</p>
<p id="drop2">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</p>
</div>
</div>
<!--More Information -->
<div class="Information">
<h1 class="title ">
More information
</h1>
<p class="body">
For more information about our product and services, Please contact us the form below.
</p>
<p class="form-body">Items marked * are required fields</p>
<form>
<label>Conatct name *.</label><br>
<input type="input-text" id="username" value="" placeholder="Enter Your name" ><br>
<label>Conatct email address *.</label><br>
<input type="input-email" id="useremail" value="" placeholder="Enter Your Email" ><br>
<span></span>
<label>Conatct phone number *.</label><br>
<input type="input-number" id="userphone" value="" placeholder=" Enter phone number"><br>
<span></span>
<button id="submit-input" type="submit">Submit</button>
</form>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
97 changes: 97 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@

//Show and Hide The news Sections
var controlElement = document.querySelector('#show');
controlElement.addEventListener('click', showHide);
var content = document.querySelector('#ajaxContent');
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();
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) {
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 || userEmail.value.indexOf('@') < 0) {
userEmail.style.backgroundColor = "red";
return false
}
else {
userEmail.style.backgroundColor = "white";
return true;
}
}


// AJAX REQUEST

var xhrcontent = document.getElementsByClassName(content);
Copy link
Contributor

@kabaros kabaros Jul 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very good!

Now as an extra challenge .. use fetch to make the AJAX call - see how much simpler you code becomes. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

(fetch doesn't work in older browsers but we don't care about that - http://caniuse.com/#feat=fetch)

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
172 changes: 172 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
body{
margin: 3%;
background-image: url("assets/background.png");
background-repeat: no-repeat;
background-size:cover;
}
.website-title{
color:white;
font-size: 57px;
font-family:Monotype Corsiva, Times, serif;
}
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;
}
/* 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: 20px;
}

.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%;
}

.hide{
display: none;
}

a{
color:#E51955;
font-size:1.2em;
background-position: left no-repeat;
}

a#show:before {
display: inline-block;
position: relative;
top: 15px;
content: url('assets/arrow.png');
}
#drop1{
color:white;
font-size: 18px;
font-family: sans-serif;
}
#drop2{
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;
}