diff --git a/app.js b/app.js new file mode 100644 index 0000000..46338f9 --- /dev/null +++ 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 +=` + +
+ ... +
+
${data.articles[i].title}
+
${data.articles[i].description}
+

${data.articles[i].content}

+

${data.articles[i].author}

+

${data.articles[i].publishedAt}

+ +
+
+
+ +

+
+
+
+ +`; + } + + }) + .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 new file mode 100644 index 0000000..1a06b97 --- /dev/null +++ b/index.html @@ -0,0 +1,110 @@ + + + + + + + + Week13 + + + + + + + + + + + + + +

+

+

+ + + +
+ + +
+
+
+
+
+
+ + + + + +

+

*Required

+ +
+ +
+
+
+ + +
+ + + + + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..dff2c33 --- /dev/null +++ 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%); +} \ No newline at end of file