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

First Commit #6

Open
khaledkz wants to merge 2 commits into
base: master
Choose a base branch
from
Open

First Commit #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b1f8aa
First Commit
khaledkz Jun 23, 2017
a2a5bf2
Update Page
khaledkz Jul 8, 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 webTest/background.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.
109 changes: 109 additions & 0 deletions webTest/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
* {
margin: 0;
padding: 0;
color: red;
}
.showOne{
margin-left:100px;

}
body {
background-image: url(../background.png);
background-repeat: no-repeat;
background-size: cover;
}

header h1 {
font-size: 3em;
margin-top: 20px;
font-family: ;
margin-left: 40px;
}

header nav {
margin-left: 40px;
margin-top: 30px;
margin-bottom: 30px;
}

header nav ul {
display: flex;
}

header nav ul li {
/*background-color: #3a3436;*/
border: solid 1px white;
background: linear-gradient(white, black 30%);
padding: 5px;
padding-left: 20px;
padding-right: 20px;
list-style: none;
}

header nav ul li a {}

.firstContainer h1 {
margin-left: 40px;
margin-bottom: 20px;
}

.firstContainer h1:first-child {
color: #ad2d51;
}

.firstContainer h1:last-of-type {
color: rgb(199, 204, 200);
}

.firstContainer p {
margin-left: 40px;
margin-bottom: 20px;
}

.firstContainer ul {
margin-left: 65px;
margin-bottom: 20px;
}

.firstContainer h3 {
color: gold;
margin-left: 40px;
margin-bottom: 20px;
}

.firstContainer h3 a {
text-decoration: none;
color: yellow;
}

.secandContainer h2 {
color: rgb(242, 35, 79);
margin-left: 40px;
}

.secandContainer p:first-of-type {
margin-left: 45px;
}

.secandContainer p:last-child {
margin-top: 30px;
margin-left: 75px;
margin-bottom: 20px;
}

form h2:first-of-type {
color: rgb(154, 154, 154);
}

form h2,
h4,
h3,
input,
button {
margin-left: 60px;
margin-bottom: 30px;
}

p {
width: 800px;
}
87 changes: 87 additions & 0 deletions webTest/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!Doctype html>
<html>

<head>
<title> Test </title>
<link rel="stylesheet" href="css/style.css">

</head>

<!-- background="background.png" -->

<body>
<header>
<h1>CYF</h1>

<nav>
<ul>
<li> <a>Menu1</a> </li>
<li> <a>Menu2</a> </li>
<li> <a>Menu3</a> </li>
</ul>
</nav>
</header>
<div class="firstContainer">

<h1>About CYF </h1>
<h1>What We Do</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt sollicitudin ultrices. Fusce dictum sem et varius porta. Aenean suscipit mauris sit amet pretium laoreet. Aliquam egestas est non nisi pulvinar, ut facilisis justo placerat. Fusce
fermentum lectus eget molestie tempor. Nam lobortis erat eget varius semper. Nullam molestie viverra nulla, eget accumsan augue maximus auctor. Maecenas placerat ante pharetra tellus cursus, fringilla sollicitudin lacus mollis.
</p>

<h3>Our Focus</h3>
<ul>
<li> Interactive </li>
<li> Mobile </li>
<li> Technology </li>
</ul>

<h3><a href="#">Click here To Download a PDF of our recent work</a></h3>
<h1>News</h1>
</div>

<div class="secandContainer">
<h2> <a id="showHide" href="#">Show/Hide news item </a></h2>
<div class="showOne">


<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt sollicitudin ultrices. Fusce dictum sem et varius porta. Aenean suscipit mauris sit amet pretium laoreet. Aliquam egestas est non nisi pulvinar, ut facilisis justo placerat. Fusce
fermentum lectus eget molestie tempor. Nam lobortis erat eget varius semper. Nullam molestie viverra nulla, eget accumsan augue maximus auctor. Maecenas placerat ante pharetra tellus cursus, fringilla sollicitudin lacus mollis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt sollicitudin ultrices.
</p>
</div>

</div>

<form>
<h2>More Information</h2>
<h4>For more information about our product, please contact us using the form below</h4>
<h4> iteam marked* are required fields </h4>

<div>
<h3>Contact name*:</h3>
<input id="contName" type="textarea" />


<h3>Contact email address*:</h3>
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.

no need to abbreviate the IDs .. just make them contactName, it's better for readability if you're sharing code with other people or in a team.

<input id="conEmail" type="textarea" />

<h3>Contact Phone number:</h3>
<input id="conPhone" type="textarea" />
<br>
<button>Submit</button>

</div>


</form>
<div class="getFromServer"></div>

<script src="js/script.js"></script>
</body>

</html>
108 changes: 108 additions & 0 deletions webTest/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
// function hideShow(){
//
// if(cheker%2=0){
// var hider=document.querySelector("#hide");
// hider.style.display="none";
// }
// }
var cheker = 2;
var clikeShowHide = document.querySelector("#showHide");
var hider = document.querySelector(".showOne");
clikeShowHide.addEventListener('click', function() {
if (cheker % 2 === 0) {
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.

this logic works but couldn't it be simpler? just a boolean that switches between true and false

var isVisible = false;

// then in the handler, just set isVisible to switch, so
isVisible = !isVisible;
// that basically makes it alternate, if it was true, it will become false and vice versa, then you don't the **magic number 2**

Also it's better to just create a class in css called .hidden { display: none } and add/remove that class based on isVisible

I would also use .replace() to remove the class instead of concatenating.

Once you have that solution running, think about another way to get rid of the variable cheker or isVisible altogether - remember that this is global state and global state is very bad. `hint: you can just check if element.className contains hidden or not, to decide if it is visible or not)

let me know if these comments are confusing and I can go through them in more details

hider.style.display = hider.style.display + " none";
Copy link

@Happy0 Happy0 Jun 23, 2017

Choose a reason for hiding this comment

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

The advice I gave you in the iCafe about this was actually not necessary. I told you to use 'replace' in case there were other attributes for 'display' but there can actually only be one attribute.

So hider.style.display="none" and "hider.style.display="flex" like you had would have been fine.

Sorry about the confusion :P

Copy link
Author

@khaledkz khaledkz Jun 23, 2017

Choose a reason for hiding this comment

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

alright anyway I am happy to know about replace sure I will need it ...

Copy link

@Happy0 Happy0 Jun 23, 2017

Choose a reason for hiding this comment

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

yup, glad we covered it :)

cheker++;
} else {
hider.style.display = hider.style.display.replace("none", "");
cheker++;
}
});

var prBtn = document.querySelector('button');
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.

prBtn better variable names (don't be lazy with variable names!)

var contactName = document.querySelector('#contName');
var contactEmail = document.querySelector('#conEmail');
var contactPhone = document.querySelector('#conPhone');

prBtn.addEventListener('click', function() {

if (contactName.value.length === 0) {
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.

you could also check if (!contactName.value) .. try that and see if it works - same for other checks

contactName.style.backgroundColor = "gold";
alert('please Add Your Name');


} else {
contactName.style.backgroundColor = "silver";

}

if (contactEmail.value.length === 0) {
contactEmail.style.backgroundColor = "gold";

alert('please Add Your Email Address');
}
// if (contactEmail.value.indexOf("@") > -1) {

// } else {
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.

delete commented out code to keep your code looking professional and clean

// alert('add @');
// }
if (contactName.value.length > 0 && contactEmail.value.length > 0) {
if (contactEmail.value.indexOf("@") > -1) {
contactEmail.style.backgroundColor = "gold";
alert("Well done");
contactName.value = "";
contactEmail.value = "";
contactPhone.value = "";
contactName.style.backgroundColor = "white";

contactEmail.style.backgroundColor = "white";


} else {
alert("add @");
}
} else {
alert("Plz Add The iteam marked * ");
}


event.preventDefault();

});



var request = new XMLHttpRequest(); //creating a request object

request.onreadystatechange = function() {
var pargraph = document.querySelector(".showOne");
if (request.readyState === 4) { // check if a response was sent back
if (request.status === 200) { // check if request was successful
var sendMsg = JSON.parse(request.responseText);

console.log(sendMsg[0]);
for (var i = 0; i < sendMsg.length; i++) {
var sendInformationTitle = sendMsg[i].title;
var sendInformationParg = sendMsg[i].summary;

var newsTitle = document.createElement('h1')
var newsPargraph = document.createElement('p')

newsTitle.innerHTML = sendInformationTitle;
newsPargraph.innerHTML = sendInformationParg;

pargraph.appendChild(newsTitle);
pargraph.appendChild(newsPargraph);
}



} else {
consloe.log('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();