CodeYourFuture · Yjohn · Jun 22, 2017 · Jun 23, 2017 · Jun 24, 2017 · Jun 24, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/creative.png → assets/creative.png b/creative.png → assets/creative.png
diff --git a/index.html b/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>
+        webDeveloper test
+    </title>
+    <link rel="stylesheet" href="style/main.css">
+
+</head>
+
+<body>
+
+    <div id="wrap">
+        <div class="main">
+            <h1>CYF</h1>
+            <div>
+                <nav>
+                    <ul>
+                        <li class="nav-item">
+                            <a href="#">Menu 1</a></li>
+                        <li class="nav-item">
+                            <a href="#">Menu 2 </a></li>
+                        <li class="nav-item">
+                            <a href="#">Menu 3</a></li>
+                    </ul>
+                </nav>
+            </div>
+            <h2>About CYF</h2>
+            <h3> What We Do</h3>
+            <p><strong>CYF </strong>is fictitious company-Lorem ipsum dolor sit amet, consecteture addipiscing elit.vestibulum
+                risus tellus, molestile et lorem quis, ultricies placerat enim. in hac habitasse platea dictumst. In dicturm
+                orci nulla, sed congue ligula tempus eget. Suspendisse eleifend elementum efficitur. <strong>CYF</strong>                maximus metus nec maximus blandit. morbi ultrices sem id nisl facilisis volutpat. Quisque eu lectus fringilla,
+                egestas dolor vel, consequant nunc. Fusce vitae lacus mauris.
+            </p>
+            <h3 class="focus"> Our focus </h3>
+            <div>
+                <ul>
+                    <li>Interactive</li>
+                    <li>Mobile</li>
+                    <li>Technology</li>
+                </ul>
+            </div>
+            <a href="#">
+                <p class="ourlink">click hear to download a PDF of our recent work</p>
+            </a>
+
+            <h3> News</h3>
+            <p id="hideitem"><span>&#8250;</span><span>Show/Hide news item</span></p>
+            <div  id="news"> 
+            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. vestibulum risus tellus, molesite et lorem quis, ultricies
+                placeratenim. In hac habitasse platea dictumst. In dictum orci nulla, see congue ligula tempus eget. Suspendisse
+                eleifend elementum efficitur. Curabitur maximus metus nec maximus blandit.
+            </p> </div>
+            <blockquote>
+                <p>"I wanted to do something new and different. sprite came to me with the idea. i thought it was cool. without
+                    the fans, there's no players."</p>
+            </blockquote>
+
+            <h3> More Information</h3>
+            <p>For more information about our products and services, please contact us using the form below</p>
+            <p>items marked * are required fields</p>
+            <form>
+                <label>contact name* </label><br>
+                <input id="exampleContactName" class="form-control" type="text" name="contactName" value=""/><br>
+
+                <label>contact email address* </label><br>
+                <input id="exampleInputEmail1" class="form-control" type="text" name="EmailAdress" /><br>
+                <label> contact phone number</label><br>
+                <input id="examplePhone" class="form-control" type="text" name="phoneNumber" /><br><br>
+
+                <button type="submit" id ="summitValid" class="btn">Submit</button>
+            </form>
+        </div>
+    </div>
+    <script src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,74 @@
+var hideShow = document.querySelector('#hideitem');
+hideShow.addEventListener('click', showHideNews);
+var news = document.querySelector('#news');
+function showHideNews(event) {
+    event.preventDefault();
+    if (news.style.display === '') {
+        news.style.display = 'none';
+    } else {
+        news.style.display = '';
+    }
+}
+
+
+var register = document.querySelector('#summitValid');
+register.addEventListener('click', validatFormFild);
+
+
+function validatFormFild() {
+    event.preventDefault();
+    var contactName = document.querySelector('#exampleContactName');
+    var emailAddress = document.querySelector('#exampleInputEmail1');
+    var contactPhone = document.querySelector('#examplePhone');
+    var isEmail = false;
+    for (i = 0; i < emailAddress.value.length; i++) {
+        if (emailAddress.value[i] === '@') {
+            isEmail = true;
+        }
+    } if (!isEmail) {
+        alert('please Enter a valid Email Address');
+    }
+    else if (!contactName.value) {
+        alert('please Enter your contact name?');
+    }
+    else if (!contactPhone.value) {
+        alert('please insert your phone number');
+    } else {
+        //clear all the input
+        alert('thank you for summit the form');
+        contactName.value = '';
+        emailAddress.value = '';
+        contactPhone.value = '';
+    }
+}
+
+var addNews = document.querySelector("#hideitem"); 
+addNews.addEventListener("click", ourRequest);
+
+var ourRequest = new XMLHttpRequest(); 
+var url = "https://private-e99507-kabaros.apiary-mock.com/news";
+var addContainer = document.getElementById("news");
+
+ourRequest.onreadystatechange = function () {
+    var data = JSON.parse(ourRequest.responseText); 
+    if (ourRequest.readyState === 4) {  
+        if (ourRequest.status === 200) {     
+            renderHTML(data).innerHTML = ourRequest.responseText;
+        } else {
+            renderHTML(data).innerHTML = 'An error occurred during your request: ' 
+            + ourRequest.status + ' ' + ourRequest.statusText;
+        }
+    }
+};
+
+ourRequest.open("GET", url);                    
+ourRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
+ourRequest.send();                                
+
+function renderHTML(data) {
+    var htmlString = "";
+    for (i = 0; i < data.length; i++) {
+        htmlString += "<h5>" + data[i].title + "</h5>" + "<p>" + data[i].summary + "</p>";
+    }
+    addContainer.insertAdjacentHTML("beforeend", htmlString);
+}
diff --git a/style/main.css b/style/main.css
@@ -0,0 +1,85 @@
+body {
+    background-image: url("https://raw.githubusercontent.com/Yjohn/WebDeveloperTest/master/assets/background.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    text-decoration: none;
+}
+
+#wrap {
+    width: 100%;
+    color: white;
+    font-family: sans-serif;
+    font-weight: 100;
+}
+
+.main {
+    width: 75%;
+    padding: 2px 30px;
+    font-weight: 100;
+}
+
+.nav-item {
+    display: inline;
+}
+
+.nav-item a {
+    text-decoration: none;
+    color: white;
+    padding: 0.1em 2em;
+    border: 0.1px solid;
+    border-right: white;
+    border-bottom: black;
+    background-image: linear-gradient( white, black 20%);
+}
+
+h1 {
+    font-family: 'Apple-Chancery', cursive;
+    font-weight: 100;
+    font-style: italic;
+    font-size: 60px;
+}
+
+h2 {
+    color: #CB3541;
+    font-weight: 100;
+}
+#news{
+ font-weight: 100;  
+}
+#hideitem{
+font-style: italic;
+border: none;
+cursor: pointer;
+}
+h3 {
+    font-weight: 100;
+}
+
+span {
+    color: #CB3541;
+    content: "\203A";
+}
+
+.focus {
+    color: yellow;
+}
+a{
+     text-decoration: none;
+}
+.ourlink {
+    color: yellow;
+    font-style: italic;
+
+}
+
+.btn {
+    border-radius: 0.15em;
+    background: light grey;
+    padding: 5px 10px;
+    border: none;
+    color: black;
+}
+.form-control {
+    border: 2px solid grey;
+    padding: 5px 35px;
+}