Web Developer test

JS/main.js

@@ -0,0 +1,128 @@
+
+// Show/Hide news control
+var controlElement = document.querySelector('#controlElement');
+controlElement.addEventListener('click', showHide);
+var news = document.querySelector('#news');
+
+//receive news section from AJAX
+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 titlePara = document.createElement("p");
+                titlePara.innerText = array[i].title;
+                titlePara.className += 'title';
+                var summarypara = document.createElement("p");
+                summarypara.innerText = array[i].summary;
+                summarypara.className += 'summary';
+                news.appendChild(titlePara);
+                news.appendChild(summarypara);
+            }
+        } 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();
+
+// Show/Hide Function
+function showHide(event) {
+    event.preventDefault();    
+    if (news.style.display === "") {
+        $( "#news" ).hide( "slow" );
+    }
+    else if (news.style.display === "none") {
+        $( "#news" ).show( "slow" );
+    }
+    else {
+         $( "#news" ).hide( "slow" );
+    }
+}
+
+// Form Validation
+//input Text
+var textEmail = document.querySelector('#InputEmail');
+var textName = document.querySelector('#text-input-name');
+var textPhone = document.querySelector('#text-input-phone');
+var inputName = document.querySelector('#inputName');
+var inputEmail = document.querySelector('#inputEmail');
+var inputNumber = document.querySelector('#inputNumber');
+
+
+
+//alarms messages
+var alertNameField = document.createElement("p");
+alertNameField.innerText = "This filed is required,Please type letters only";
+alertNameField.className = 'nameAlert';
+var alertEmailField = document.createElement("p");
+alertEmailField.innerText = "This filed is required,Please enter email like:- Example@XX.XX";
+alertEmailField.className = 'emailAlert';
+var alertContactField = document.createElement("p");
+alertContactField.innerText = "Please enter maxsimum 11 numbers";
+alertContactField.className = 'contactAlert';
+
+//submit button
+var sbumitButton = document.querySelector('form .btn-primary');
+sbumitButton.addEventListener('click', submitForm);
+//submit function
+function submitForm(event) {
+    event.preventDefault();
+    var checkValideEmail = checkEmail();
+    var checkValideName = checkName();
+    var checkValideNumber = checkNumber();
+    if (checkValideEmail && checkValideName) {
+        textEmail.value = "";
+        textName.value = "";
+        textPhone.value = "";
+        setTimeout(function () {
+            alert('Thank you for filling out the form');
+        }, 200);
+    }
+}
+//check text in email field 
+function checkEmail() {
+    if (textEmail.value.length <= 0 || textEmail.value.indexOf('@') < 0 || !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(textEmail.value))) {
+        inputEmail.appendChild(alertEmailField);
+    }
+    else {
+        if ($('p.emailAlert').length === 1) {
+            inputEmail.removeChild(alertEmailField);
+        }
+        return true;
+    }
+}
+
+//check text in name field 
+function checkName() {
+    if (textName.value.length <= 0 || /\d/.test(textName.value) || /[~`!#$%\^&*+=\-\[\]\\';,/{}.|\\":<>\?]/.test(textName.value)) {
+        inputName.appendChild(alertNameField);
+    }
+    else {
+        if ($('p.nameAlert').length === 1) {
+            inputName.removeChild(alertNameField);
+        }
+        return true;
+    }
+}
+
+//check text in number field 
+function checkNumber() {
+    if (!(/[~`!#$%\^&*+=\-\[\]\\';,/{}.|\\":<>\?]/g.test(textPhone.value)) && textPhone.value.length < 11 && (!(/[A-Za-z]/.test(textPhone.value)) || textPhone.value.length === 0)) {
+        if ($('p.contactAlert').length === 1) {
+            inputNumber.removeChild(alertContactField);
+        }
+        return true;
+    }
+    else {
+        inputNumber.appendChild(alertContactField);
+        return false;
+    }
+}
+
+
+

index.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Code Your Future | CYF</title>
+    <link rel="stylesheet" href="styles/style.css">
+</head>
+
+<body>
+    <!-- Site Header-->
+    <div class="site-header">
+        <h1 class="website-title">CYF</h1>
+        <!-- Navigate bar-->
+        <div class="navbar" >
+            <button id="Menu1" type="button" class="btn btn-primary">Menu 1</button>
+            <button id="Menu2" type="button" class="btn btn-primary">Menu 2</button>
+            <button id="Menu3" type="button" class="btn btn-primary">Menu 3</button>
+        </div>
+    </div>
+    <!-- Articles-->
+    <div id="mainArticles" class="articles">
+        <div class="articles-title">
+            About CYF
+        </div>
+        <!--First Article_What we do-->
+        <article class="article first">
+            <div class="article-title ">
+                What We Do
+            </div>
+            <p class="article-body"><b>Lorem Ipsum</b> 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 specimen book. It 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 <b> Lorem Ipsum</b> passages, and more recently with desktop publishing software like Aldus
+                PageMaker including versions of Lorem Ipsum. </p>
+        </article>
+        <!--Second Article_Our focus-->
+        <article class="article second">
+            <div class="article-title ">
+                Our focus
+            </div>
+            <ul class="article-body">
+                <li class="article-body-item ">
+                    Interactive
+                </li>
+                <li class="article-body-item">
+                    Mobile
+                </li>
+                <li class="article-body-item">
+                    Technology
+                </li>
+            </ul>
+            <p class="article-body">
+                <a href="#">
+				<span class="download"></span>
+					Click here to download a pdf for our recent work 
+				</a>
+            </p>
+        </article>
+        <!--Third Article_ News-->
+        <article class="article third">
+            <div class="article-title ">
+                News
+            </div>
+            <ul class="article-body-control">
+                <li><a href="#" id="controlElement">Show/Hide news items</a></li>
+            </ul>
+
+            <div class="article-body" id="news">
+
+            </div>
+
+        </article>
+        <!--Fourth Article_ Form-->
+        <article class="article fourth" >
+            <div class="article-title ">
+                More information
+            </div>
+            <p class="article-body">
+                For more information about our product and services, Please contact us the form below.
+            </p>
+            <p class="article-body">Items marked * are required fields</p>
+            <form>
+                <div class="form-group" id="inputName">
+                    <label for="text-input-name">Contact name*:</label><br>
+                    <input class="form-control" type="text" value="" id="text-input-name">
+                </div>
+                <div class="form-group" id="inputEmail">
+                    <label for="InputEmail">Contact Email address*:</label><br>
+                    <input type="email" class="form-control" id="InputEmail" aria-describedby="emailHelp">
+                </div>
+                <div class="form-group" id="inputNumber">
+                    <label for="text-input-phone">Contact phone number:</label><br>
+                    <input class="form-control" type="text" value="" id="text-input-phone">
+                </div><br>
+                <button type="submit" class="btn btn-primary">Submit</button>
+            </form>
+
+        </article>
+    </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+    <script src="./JS/main.js"></script>
+
+</body>
+
+</html>

styles/style.css

@@ -0,0 +1,85 @@
+
+/* body style */
+body{
+    margin: 3%;
+    background-image: url("../assets/background.png");
+    background-repeat: no-repeat;
+    background-size:cover;
+}
+/* header style */
+h1{
+    font-family: sans-serif;
+    font-size: 6em;
+    color: white;
+}
+/* navigate bar style */
+.navbar button{
+    display:block;
+    float:left;
+    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;
+}
+/* Articles style */
+article {
+    width:75%;
+}
+.articles .articles-title{
+    clear: left; 
+    font-family: sans-serif;
+    font-size:3em;
+    color:#E51955;
+    margin-bottom: 20px;
+}
+.article .article-title{
+    color: white;
+    font-size: 2em;
+    font-family: sans-serif;
+}
+article.second .article-title{
+    color: yellow;
+    font-size: 2em;
+    font-family: sans-serif;
+}
+article .article-body{
+    font-family: sans-serif;
+    color: white;
+    font-size: 1em;
+}
+article.second a{
+    color: yellow;
+    font-style: italic;
+    text-decoration: none;
+}
+
+article.third .article-body-control{
+    color:#E51955;
+    font-size:1.5em;
+}
+article.third ul{
+    list-style-image: url('../assets/arrow.png');
+}
+#news .title{
+    text-decoration: underline;
+}
+/* Form style */
+form{
+    color: white;
+}
+#InputEmail , #text-input-phone{
+    width: 300px;
+}
+p.nameAlert, .emailAlert,.contactAlert{
+    font-size: 1em;
+    color: red;
+    margin: 1px;
+}