hackyourfuturecanada · hamzakoc · Oct 27, 2019
diff --git a/app.js b/app.js
@@ -0,0 +1,123 @@
+
+
+var url = 'https://newsapi.org/v2/top-headlines?' +
+    'country=us&' +
+    'apiKey=02ab49fb89864ca7a94b3a70554114ec';
+
+// // I added foreach but I gave me an error and It changed to fetch API
+/*
+var xhr = new XMLHttpRequest();
+xhr.onload = function () {
+    let list = document.getElementById("employees");
+    return new Promise(function (resolve, reject) {
+        if (xhr.readyState == XMLHttpRequest.DONE) {
+            const datas = JSON.parse(xhr.responseText);
+            resolve(
+
+            document.getElementById("h1").textContent += datas.articles[randomNumber].description);
+            document.getElementById("img").setAttribute("src", datas.articles[randomNumber].urlToImage)
+            document.getElementById("root").textContent += datas.articles[randomNumber].content;
+
+                console.log(datas)
+    }
+    }).catch(function (error) {
+        throw error;
+    })
+}
+xhr.open('GET', url, true);
+xhr.send(null);
+
+*/
+
+
+ function apiGetAll() {
+     // console.log("Fetching stuff")
+     fetch(url)
+         .then(response=>response.json())
+         .then(data=> {
+
+
+            for(let i=0; i<5; i++){
+
+               console.log(data.articles[i]);
+
+                document.getElementById("news").innerHTML +=`
+
+                  <div  class="card">
+                    <img src = "${data.articles[i].urlToImage}" class = "card-img-top" alt = "..." >
+                        <div class="card-body">
+                        <h5 id="h1" class="card-title">${data.articles[i].title}</h5>
+                            <h6 id= "root" class = "card-text">${data.articles[i].description} </h6>
+                            <p id= "root" class = "card-text">${data.articles[i].content} </p>
+                            <p id= "root" class = "card-text">${data.articles[i].author} </p>
+                            <p id= "root" class = "card-text">${data.articles[i].publishedAt} </p>
+
+                        </div>
+                    <div class="card-footer">
+                    <fieldset>
+                      <button id = "n1" type = "button"class = "btn btn-primary" onclick = "showNews()" >${"Save"} </button>
+                      <p id="sign"></p>
+                  </fieldset>
+                    </div>
+                </div> 
+
+`;
+    }
+
+            })
+         .catch(err=> console.log(err));
+ }
+
+apiGetAll();
+
+
+
+currentUser = []
+
+
+function validate() {
+    var username = document.getElementById("username").value;
+    var password = document.getElementById("password").value;
+
+    if (!username == "" && !password=="" ) {
+        currentUser.push(username, password)
+        // console.log(currentUser)
+
+        document.getElementById("createuser").innerHTML = "You have created new user:  " + username + '\n' + '\n';
+        document.getElementById("createpassword").innerHTML = "Your password is:  " + password + '\n' + '\n';
+    }else{
+        document.getElementById("info").textContent = "Opss! Enter a value to submit" 
+     }
+
+}
+
+
+// console.log(document)
+
+
+
+
+var attempt = 3; // Variable to count number of attempts.
+
+function showNews() {
+    const createdUser = document.getElementById("createuser").value;
+    if (!currentUser[0] == "" && !currentUser[1] == ""){
+
+            attempt--;
+            document.getElementById("p1").textContent = attempt + " articles left to save";
+            document.querySelector(".card").style.backgroundColor = "#ccdcff";
+                   if (attempt == 0) {
+
+
+                    document.querySelector("fieldset").disabled = true;
+                    alert("Sorry, you have reached your capacity");
+
+
+                }
+  }else{
+        alert("Sign in to save");
+
+  }
+}
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Week13</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link href="style.css" rel="stylesheet">
+    <script src="app.js"></script>
+
+</head>
+
+<body>
+
+
+<nav class="navbar navbar-expand-md navbar-dark bg-danger">
+    <a href="#" class="navbar-brand">Hmzkoc</a>
+    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarCollapse">
+        <div class="navbar-nav">
+            <a href="#" class="nav-item nav-link active">Home</a>
+            <a href="#" class="nav-item nav-link active">|</a>
+            <a href="#" class="nav-item nav-link active">Breaking News</a>
+            <a href="#" class="nav-item nav-link active">|</a>
+            <a href="#" class="nav-item nav-link active">Analysis</a>
+            <a href="#" class="nav-item nav-link active">|</a>
+            <a href="#" class="nav-item nav-link active">Politics</a>
+            <a href="#" class="nav-item nav-link active">|</a>
+            <a href="#" class="nav-item nav-link active">Economy</a>
+            <a href="#" class="nav-item nav-link active">|</a>
+            <a href="#" class="nav-item nav-link active">World</a>
+        </div>
+        <form class="form-inline ml-auto">
+            <input type="text" class="form-control mr-sm-2" placeholder="Search">
+            <button type="submit" class="btn btn-outline-light">Search</button>
+        </form>
+    </div>
+</nav>
+
+<h1 id="createuser" class="heading"></h1>
+<h1 id="createpassword" class="heading"></h1>
+<h2 id="p1" class="heading"></h2>
+
+
+
+<div   id="div1">
+
+
+<div id="news" class="card-deck ">
+    <div  class="car">
+        <div class="car">
+            <div class="float-left" id="form" class="">
+                <div class="main">
+                    <form id="form_id" method="post" name="myform">
+                        <label>User Name* :</label>
+                        <input id="username" type="text" name="username" id="username" />
+                        <label>Password* :</label>
+                        <input type="password" name="password" id="password" />
+                        <input type="button" value="Create User" id="submit" onclick=" validate()" />
+                        <br><br>
+                        <p id="info">*Required</p>
+
+                    </form>
+
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+
+
+
+
+
+
+
+
+
+
+</div>
+
+
+
+
+
+
+
+</div>
+
+
+
+
+
+
+
+
+
+</body>
+
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,88 @@
+#div1{
+    margin-left: 50px;
+    margin-top: 20px;
+    float: none;
+
+
+}
+
+#n1:checked{
+    background-color: #e5a900;
+}
+
+
+
+.heading{
+    text-align: center;
+}
+
+
+
+div.main {
+    width: 200px;
+    padding: 10px 20px 25px;
+    border: 2px solid gray;
+    border-radius: 10px;
+    font-family: raleway;
+    float: left;
+    margin-top: 0px;
+    margin-right: 50px;
+}
+
+input[type=text],
+input[type=password] {
+    width: 100%;
+    height: 40px;
+    padding: 5px;
+    margin-bottom: 25px;
+    margin-top: 5px;
+    border: 2px solid #ccc;
+    color: #4f4f4f;
+    font-size: 16px;
+    border-radius: 5px;
+}
+
+label {
+    color: #464646;
+    text-shadow: 0 1px 0 #fff;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+center {
+    font-size: 32px;
+}
+
+.note {
+    color: red;
+}
+
+.valid {
+    color: green;
+}
+
+.back {
+    text-decoration: none;
+    border: 1px solid rgb(0, 143, 255);
+    background-color: rgb(0, 214, 255);
+    padding: 3px 20px;
+    border-radius: 2px;
+    color: black;
+}
+
+input[type=button] {
+    font-size: 16px;
+    background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
+    border: 1px solid #e5a900;
+    color: #4E4D4B;
+    font-weight: bold;
+    cursor: pointer;
+    width: 100%;
+    border-radius: 5px;
+    padding: 10px 0;
+    outline: none;
+}
+
+input[type=button]:hover {
+    background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
+}