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

Hervin's Web Dev Test #9

Open
cardona6 wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Hervin's Web Dev Test #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b315130
change something
Jun 22, 2017
1adc772
working on my homework
Jun 22, 2017
9dfdafc
working in my pag
Jun 26, 2017
d43a32b
I am working on data validation
Jun 26, 2017
0d732bf
I am working in API i use AJAX
Jun 29, 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
76 changes: 76 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>

<head>
<title>A Pen by Hervin</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

</head>

<body>
<div class="container">
<h1 class="display-1">CYF</h1>
</div>
<div class="container">
<div class="primary-content">
<article class="primary-column menu-border">
<h1>Menu 1</h1>
</article>
<article class="primary-column menu-border">
<h1>Menu 2</h1>
</article>
<article class="primary-column menu-border">
<h1>Menu 3</h1>
</article>
</div>
</div>

<div class="container">
<h1 class="pink"><br>About CYF</h1>
</div>

<div class="container">
<h1> <br>What We Do </h1>
<p> <br> CYF is a fictitious company-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus tellus,
molestie et lorem quis, ultricies placerat enim. Im hac habitasse platea distumst. In dictum orci nulla, sed
congue ligula tempus eget. Suspendisse eleifend elementum efficitur. CYF maximus metus nec maximus blandit. morbi
ultrices sem id nisl facilisis volutpat. Quisque eu lectus fringilla, egetas dolorvel, consequat nunc. fusce
vitae lacus mauris. </p>

<h2 class="yellow">Our focus</h2>
<ul>
<li>Interactive</li>
<li>Mobile</li>
<li>Technology</li>
</ul>

<a class="yellow" href="#">click here to dowload a PDF of our recent work</a>
Copy link

@Happy0 Happy0 Jul 5, 2017

Choose a reason for hiding this comment

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

Good reuse of the 'yellow' class :)


</div>

<div class="container">
<h1><br>News</h1>
<h2 class="purple"><br>Show / Hide news item </h2>

<div id="anser"></div>
</div>

<div class="container">
<h1><br>More Information </h1>
<p><br>For more information about our products and services, please contact us using the form below <br></p>
<p><br>Items marked * are required fields</p>
<label>Contact name *.</label>
<input type="names" value="" class="form-control" id="inputname">
<label>contact email address *.</label>
<input type="email" value="" class="form-control" id="inputEmail">
<label>contact phone number.</label>
<input type="number" value="" class="form-control" id="inputPassword">
<button type="submit" class="btn btn-default" id="submi">Submit</button>
</div>
</body>
<script type="text/javascript" src="program.js"></script>

</html>
63 changes: 63 additions & 0 deletions program.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
var buttons = document.querySelector("#submi");
buttons.addEventListener('click', changesome);

function changesome() {
Copy link

@Happy0 Happy0 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 give your function a less general name.

A good function name describes what it is that your function does. You could summarise the changes that happen to your page when this function is called by your event listener.

var button1 = document.querySelector('#inputname');
var button1value = button1.value;
if (button1value.length == 0) {
alert("please enter a Name");
return
Copy link

@Happy0 Happy0 Jul 5, 2017

Choose a reason for hiding this comment

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

It's good style to add a ; at the end of a 'return' statement.

}
var button2 = document.querySelector('#inputEmail');
var button2value = button2.value;
if (button2value.length == 0) {
alert("please enter a email");
return
}
var emailaddres = document.querySelector('#inputEmail');
if (emailaddres.value.indexOf('@') === -1) {
Copy link

@Happy0 Happy0 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 improve your validation a bit further by validating that the E-mail address does not begin or end with '@' and only contains one '@' symbol. For example:

@gordon@.blah.com would not be a valid E-mail address.

You could also make sure that the E-mail address does not contain any symbols (like ^%&*!"().) hi£$"%@things.com would not be valid, for example.

And you could make sure that there is a '.' somewhere after the '@'.

Note: it's difficult to validate E-mail addresses properly, so we would probably use a library to do it for us. But it would be good practise for you to try those things above :).

alert('Please write the @ sign to your email');
return
}

var button3 = document.querySelector('#inputPassword');
var button3value = button3.value;
if (button3value.length !== 11) {
alert("please enter a valid Phone number");
return
}
alert("Thank you for completing your information.");
}





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


request.onreadystatechange = function () {
if (request.readyState === 4) { // check if a response was sent back
var box = document.querySelector('#anser');
if (request.status === 200) { // check if request was successful
var news = JSON.parse(request.responseText);
var output = '';
for(i =0; i < news.length; i++ ){
output += '<h3>' + news[i].title + '</h3>';
output += '<p>' + news[i].summary + '</p>';
}
box.innerHTML = output;
} else {
box.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText;
}
}
}
var url = "https://private-e99507-kabaros.apiary-mock.com/news";
//server location
// content we want to send
request.open("Get", url, true); // adding them to the request

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info
request.send();


34 changes: 34 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
body{
background-image: url("assets/background.png");
background-size: 100% 100%;
Copy link

@Happy0 Happy0 Jul 5, 2017

Choose a reason for hiding this comment

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

This looks as though it might not be valid CSS :P.

Maybe background-size: 100%; instead?

color: white;
}

.pink {
color: #9A0F0A;
}

.yellow {
color:yellow;
}
.purple{
color:purple;
}

.primary-column {
background-color: black;
color: white;
width: 15%;
}

.menu-border {
border-style: solid;
border-right:white;
border-bottom:white;
}

.primary-content{
display: flex;
flex-direction: row;

}