diff --git a/src/assets/js-heroes-bear.png b/src/assets/js-heroes-bear.png new file mode 100644 index 0000000..0a21525 Binary files /dev/null and b/src/assets/js-heroes-bear.png differ diff --git a/src/index.html b/src/index.html index 46e8908..7ef5d19 100644 --- a/src/index.html +++ b/src/index.html @@ -6,24 +6,44 @@ JSHeroes Bootcamp +
-

GitHub Explorer

+
+

Welcome to the JSHeroes Bootcamp!

+
+
-
- +
+
+
+ + +
+
+
+ +
    + + + +
+ +
\ No newline at end of file diff --git a/src/script.js b/src/script.js index ceb3b61..2b9ca15 100644 --- a/src/script.js +++ b/src/script.js @@ -36,24 +36,58 @@ const repositories = [ }, ]; -function createRepositoryCard() { +var formSearch = document.querySelector("form"); + +var temp = document.querySelector("[data-template-card]"); + +const repoList = document.querySelector("[data-repo-list]"); + +function createRepositoryCard(repository) { // Implement string template HTML builder for repo card + const clone = temp.content.cloneNode("true"); + const nameElement = clone.querySelector("[data-header]"); + const paragraph = clone.querySelector("[data-paragraph]"); + const stars = clone.querySelector("[data-stark]"); + const forks = clone.querySelector("[data-forks]"); + + nameElement.textContent = repository.full_name; + paragraph.textContent = repository.description; + stars.textContent += repository.stargazers_count; + forks.textContent += repository.forks; + + repoList.append(clone); } -function renderRepositories() { +function renderRepositories(repos) { // Implement DOM manipulation function to add list items in the repo list + repos.map((repository) => createRepositoryCard(repository)); } // Comment this out when you start working on the search functionality -renderRepositories(); +//renderRepositories(); +formSearch.addEventListener("submit", handleSearch); -function handleSearch() { +function handleSearch(event) { // Implement form submit event handler + event.preventDefault(); + const data = new FormData(event.target); + const searchText = data.get("searchBar"); + const query = searchText ? `q=${searchText}` : "q=stars:>10000"; + fetchRepositories(query); } -async function fetchRepositories() { +async function fetchRepositories(query) { // Pass parameter to the search endpoint - return fetch("https://api.github.com/legacy/repos/search/") + return fetch(`https://api.github.com/search/repositories?${query}`, { + headers: { + Authorization: "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", + }, + }) .then((res) => res.json()) - .then((res) => res.repositories); + .then((res) => { + var repositories = res.items; + renderRepositories(repositories); + }); } + +fetchRepositories("q=stars:>10000"); diff --git a/src/style.css b/src/style.css index 9526375..77179e8 100644 --- a/src/style.css +++ b/src/style.css @@ -1,6 +1,101 @@ body { margin: 0; - font-family: system-ui, sans-serif; + font-family: "Ubuntu", sans-serif; +} + +header h1 { + font-weight: 800; +} + +.bear_pic { + height: 100%; + position: absolute; + left: 0; +} + +.input { + border-radius: 8px 0 0 8px; + border: 0.1px solid; + border-color: grey; + border-right: 0; + padding: 1rem; + flex: 1; +} + +.input:focus { + outline: none; + border-color: #0098ff; +} + +.button { + border: 0; + border-radius: 0 8px 8px 0; + color: white; + background-color: #0098ff; + padding: 1rem 2rem; +} + +.card { + border: 1px solid grey; + border-radius: 8px; + padding: 1.5rem 2.5rem; +} + +.card:hover { + box-shadow: 0px 0px 8px grey; + transform: scale(1.03); +} + +.footer-card { + display: flex; + gap: 1rem; +} + +.repo-cards { + padding: 0; + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); +} + +.button:hover { + background-color: #0b1b44; + cursor: pointer; +} + +.form-search { + display: flex; + margin-bottom: 4rem; +} + +.container { + max-width: 75rem; + margin-inline: auto; + padding: 3rem 2rem; + position: relative; + width: 100%; + z-index: 1; +} + +header { + display: flex; + background-color: #0b1b44; + color: white; + align-items: center; + position: relative; +} + +@media only screen and (max-width: 1400px) { + header { + flex-direction: row-reverse; + justify-content: left; + } + .bear_pic { + left: auto; + right: 0; + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + } } ul {