Done

README.md

@@ -1,4 +1,5 @@
 # GitHub Search App
+A html and css project
 
 ## GitHub API
 

shirin_and_qays/.learn

@@ -0,0 +1,2 @@
+languages:
+  - javascript

shirin_and_qays/README.md

@@ -0,0 +1,68 @@
+# GitHub Search App
+
+## GitHub API
+
+You will be using the GitHub API for this project. You can view documentation
+for this API [here](https://developer.github.com/v3/). This is an open API: no
+API key or authentication is required for the endpoints we will be using.
+
+Notice the GitHub API documentation includes the following excerpt. They require
+you to add a custom header to your requests.
+
+<blockquote>
+By default, all requests to https://api.github.com receive the v3 version of the REST API. We encourage you to explicitly request this version via the Accept header.
+</blockquote>
+
+```text
+Accept: application/vnd.github.v3+json
+```
+
+#### [User Search Endpoint](https://developer.github.com/v3/search/#search-users)
+
+You can search for users matching a certain name. For example, if we wanted to
+find all users name `octocat`, we would make a `GET` request to
+`https://api.github.com/search/users?q=octocat`. To view the response, you can
+copy and paste that URL into your browser.
+
+This endpoint is rate limited. This means the API will stop returning data if
+you make more than
+[10 requests per minute](https://developer.github.com/v3/search/#rate-limit).
+
+#### [User Repos Endpoint](https://developer.github.com/v3/repos/#list-user-repositories)
+
+You can find all the public repositories for a user using this endpoint. For
+example if we wanted to find all the repositories for a user with GitHub
+username `octocat`, we would make a `GET` request to
+`https://api.github.com/users/octocat/repos`. To view the response, you can copy
+and paste that URL into your browser.
+
+This endpoint is rate limited. This endpoint will stop returning data if you
+make more than
+[60 requests in an hour](https://developer.github.com/v3/#rate-limiting).
+
+## Deliverables
+
+You are going to build a JavaScript application which searches GitHub for users
+by name and displays the results on the screen. Clicking on a specific user will
+show all the repositories for that user.
+
+1. The `index.html` file has a form with a search input. When the form is
+   submitted, it should take the value of the input and search GitHub for user
+   matches using the [User Search Endpoint](#user-search-endpoint).
+2. Using the results of the search, display information about the users to the
+   page. (You might include showing their username, avatar and a link to their
+   profile.)
+3. Clicking on one of these users should send a request to the
+   [User Repos Endpoint](#user-repos-endpoint) and return data about all the
+   repositories for that user.
+4. Using the response from the Users Repos Endpoint, display all the
+   repositories for that user on the page.
+
+## Bonus
+
+- Toggle the search bar between searching for users by keyword and searching for
+  repos by keyword by adding an extra button. Hint: you can use the same search
+  bar for this, but you may need to create a variable which stores what the
+  current search type is (user or repo). The endpoint to search repositories by
+  keyword is
+  [here](https://developer.github.com/v3/search/#search-repositories).

shirin_and_qays/index.css

@@ -0,0 +1,49 @@
+#main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#github-container {
+  display: flex;
+}
+
+ul {
+  list-style: none;
+}
+
+.card {
+  width: 500px;
+  min-height: 100px;
+  padding: 20px;
+  border-radius: 3px;
+  background-color: white;
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+.firstinfo {
+ display: flex;
+  flex-direction: row;
+  z-index: 2;
+  position: relative;
+}
+.firstinfo img{
+
+
+width: 80px;
+min-height: 80px;
+max-height: 80px;
+
+}
+
+.firstinfo .profileinfo {
+    padding: 0px 20px;
+}
+
+.firstinfo .profileinfo p.bio {
+  padding: 10px 0px;
+  color: #5A5A5A;
+  line-height: 1.2;
+  font-style: initial;
+}

shirin_and_qays/index.html

@@ -0,0 +1,33 @@
+<html>
+<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'/>
+  <title>Document</title>
+  <script src='js/index.js'></script>
+  <link rel='stylesheet' href='index.css'/>
+</head>
+<body>
+  <div id='main'>
+
+    <h2>GitHub Search</h2>
+
+    <form id='github-form'>
+      <input id='search' type='text' name='search'>
+      <input type='submit' name='submit'/>
+    </form>
+
+    <div id='github-container'>
+      <ul id='user-list'>
+
+      </ul>
+
+      <ul id='repos-list'>
+
+      </ul>
+    </div>
+
+  </div>
+
+</body>
+</html>

shirin_and_qays/js/index.js

@@ -0,0 +1,107 @@
+let users;
+let repos;
+
+
+document.addEventListener('DOMContentLoaded', function () {
+
+
+  const form = document.getElementById('github-form');
+  const searchText = document.getElementById('search');
+  const usersList = document.getElementById('user-list');
+  form.addEventListener('submit', function (e) {
+    e.preventDefault();
+
+    fetch(`https://api.github.com/search/users?q=${searchText.value}`, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/vnd.github.v3+json'
+      },
+    }).then(response => response.json())
+      .then(data => {
+
+        users = [...data.items];
+        usersList.innerHTML = '';
+        console.log('Success:', data.items);
+
+        for (let index = 0; index < users.length; index++) {
+
+          const user = users[index];
+          const userName = user.login;
+          const avatar = user.avatar_url;
+          const profileUrl = user.url;
+
+          usersList.innerHTML += `<div class="card" onclick="showRepo(${index})">
+        <div class="firstinfo"><img src="${avatar}">
+        <div class="profileinfo">
+        <h1>${userName}</h1>
+        <p class="bio"><a href="${profileUrl}">GitHub</a></p>
+        </div>
+        </div>
+        </div>`;
+
+
+        }
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+      });
+  });
+
+
+
+
+
+
+
+
+
+});
+
+
+
+function showRepo(index) {
+  const reposList = document.getElementById('repos-list');
+
+  const profileUrl = users[index].url;
+  fetch(`${profileUrl}/repos`, {
+    method: 'GET',
+    headers: {
+      Accept: 'application/vnd.github.v3+json'
+    },
+  })
+    .then(response => response.json())
+    .then(data => {
+
+      repos = [...data];
+      reposList.innerHTML = '';
+      console.log('Success:', data);
+
+      for (const repo of repos) {
+        const full_name = repo.full_name;
+        const html_url = repo.html_url;
+
+        reposList.innerHTML += `<div class="card">
+           <div class="firstinfo">
+           <div class="profileinfo">
+           <h1>${full_name}</h1>
+           <h3>Python Ninja</h3>
+           <p class="bio"><a href="${html_url}">GitHub</a></p>
+           </div>
+           </div>
+           </div>`;
+
+
+      }
+    })
+    .catch((error) => {
+      console.error('Error:', error);
+    });
+
+
+}
+
+
+
+
+
+