created folder structure and added in html, css and js code

sharkrachel · Jan 12, 2020 · 3b3552c · 3b3552c
1 parent 91843a0
commit 3b3552c
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 0 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -0,0 +1,44 @@
+body {
+    width: 100%;
+    margin: 0;  
+    display: block;
+}
+.container {
+align-content: center;
+}
+header {
+    width: 100%;
+    margin: 0;
+    padding-top: 3%;
+    padding-bottom: 3%;
+    font-family: Gothic;
+    background-image: url('https://images.freecreatives.com/wp-content/uploads/2016/02/Blue-Pattern-Background-For-Free-Download.jpg');
+}
+h1 {
+    font-weight: bold;
+    color: snow;
+    text-align: center;
+    font-size: 30rem;
+}
+#formStyling input {
+    align-content: center;
+    margin-left: 50%;
+}
+#submit {
+    border: solid blue 1px;
+}
+h3 {
+   padding-top: 2%; 
+   font-family: Helvetica;
+   display: block;
+   width: 950px;
+}
+#clear {
+    border: solid red 1px;
+}
+
+.articleHead {
+    font-weight: bold;
+    font-size: 22px;
+    font-family: Helvetica;
+}
diff --git a/assets/javascript/app.js b/assets/javascript/app.js
@@ -0,0 +1,53 @@
+
+
+
+$("#submit").on("click", function (event) {
+
+    var startYear = $("#startYear").val();
+    var endYear = $("#endYear").val();
+    var searchTerm = $("#searchTerm").val();
+    var apiKey = "&api-key=HCJrGDdBsxZNT7iS3c766UMkkHguoUYh";
+    var queryURL = "https://api.nytimes.com/svc/search/v2/articlesearch.json?q=" + searchTerm  +  apiKey ;
+    // If the user provides a startYear -- the startYear will be included in the queryURL
+    if (startYear) {
+        queryURL = queryURL + "&begin_date=" + startYear + "0101";
+    };
+    // If the user provides a startYear -- the endYear will be included in the queryURL
+    if (endYear) {
+        queryURL = queryURL + "&end_date=" + endYear + "1231";
+    };
+    console.log(queryURL);
+
+    // this prevents page from doing what it would normally do. In this case, it stops the page from refreshing when pressing submit //
+    event.preventDefault();
+    $("#articleContainer").empty();
+    $.ajax({
+        url: queryURL,
+        method: "GET"
+    })
+        .then(function (response) {
+            console.log(response);
+            console.log(response.response.docs[0].lead_paragraph);
+            for (var i = 0; i < $("#numbRecords").val(); i++) {
+                var a = $("<div>")
+                a.addClass("article");
+                a.append("<a class='articleHead' href='" + response.response.docs[i].web_url +"' target='_blank'>" + response.response.docs[i].headline.main + "</a>");
+                a.append("<p class='articleBody'>" + response.response.docs[i].lead_paragraph + "</p>");
+
+
+                $("#articleContainer").append(a);
+
+            }
+        });
+
+});
+
+function clear() {
+    $("#articleContainer").empty();
+    $("#nytForm").trigger("reset");
+}
+
+$("#clear").on("click", function() {
+    event.preventDefault();
+    clear();
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <title>Document</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link href="https://fonts.googleapis.com/css?family=Crimson+Text&display=swap" 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">
+
+
+</head>
+
+<body>
+    <header>
+        <h1>New York Times</h1>
+    </header>
+    <div class="container">
+        <h2></h2>
+        <form id="nytForm" class="form-horizontal" role="form">
+            <div class="form-group">
+                <label class="control-label col-sm-2" for="email">
+                    <h3 class='wordStyling'>Search Term:</h3>
+                </label>
+                <div class="col-sm-10">
+                    <input type="text" class="form-control" id="searchTerm" placeholder="Search Term" name="email">
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="control-label col-sm-2" for="pwd">
+                    <h3 class='wordStyling'>Number of Records to Retrieve:</h3>
+                </label>
+                <div class="col-sm-10">
+                    <input type="text" class="form-control" id="numbRecords" placeholder="Number of Records to Retrieve"
+                        name="pwd">
+                </div>
+            </div>
+            <form class="form-horizontal" role="form">
+                <div class="form-group">
+                    <label class="control-label col-sm-2" for="email">
+                        <h3 class='wordStyling'>Start Year (optional):</h3>
+                    </label>
+                    <div class="col-sm-10">
+                        <input type="text" class="form-control" id="startYear" placeholder="Start Year" name="email">
+                    </div>
+                    <form class="form-horizontal" role="form">
+                        <div class="form-group">
+                            <label class="control-label col-sm-2" for="email">
+                                <h3 class='wordStyling'>End Year(optional):</h3>
+                            </label>
+                            <div class="col-sm-10">
+                                <input type="text" class="form-control" id="endYear" placeholder="End Year"
+                                    name="email">
+                            </div>
+                            <div class="form-group">
+                                <div class="col-sm-offset-2 col-sm-10">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="col-sm-offset-2 col-sm-10">
+                                    <button type="submit" class="btn btn-default" id='submit'>Search</button>
+                                    <button type="submit" class="btn btn-default" id='clear'>Clear</button>
+                                </div>
+                            </div>
+                    </form>
+                </div>
+            </form>
+            <div id="articleContainer">
+
+            </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="app.js"></script>
+</body>