Skip to content

Answer #281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
godwinKamau wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Answer #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2c92b97
AniList API is confusing
godwinKamau Oct 5, 2025
136372f
started styling
godwinKamau Oct 6, 2025
9def643
styling
godwinKamau Oct 7, 2025
d6b123f
added README
godwinKamau Nov 13, 2025
17d12ad
fixed readme
godwinKamau Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 27 additions & 22 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
# 📊 Project: Simple API 2

### Goal: Display data returned from an api

### How to submit your code for review:

- Fork and clone this repo
- Create a new branch called answer
- Checkout answer branch
- Push to your fork
- Issue a pull request
- Your pull request description should contain the following:
- (1 to 5 no 3) I completed the challenge
- (1 to 5 no 3) I feel good about my code
- Anything specific on which you want feedback!

Example:
```
I completed the challenge: 5
I feel good about my code: 4
I'm not sure if my constructors are setup cleanly...
```
# Bangers, Only

_Making use of the anilist API to find new anime based off of how trashy I'm feeling in the moment_

Description: Users can input their preferences of genre, rating, and year to receive the top results from anilist in my slick css design.

<hr>

<img src="./Screenshot 2025-11-13 at 2.19.12 PM.png">

<hr>

## [Live Demo Here](https://godwinkamau.github.io/simple-api2/)

<hr>

## Tech Used

HTML, CSS, JavaScript, AniList API

<hr>

## Lessons Learned

- Using fetch requests to get data from a non-traditional API.
- A few neat CSS techniques to make the page interactive.
- Using the in-browser api-interface to build out a more complicated calling system.
Binary file added Screenshot 2025-11-13 at 2.19.12 PM.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
136 changes: 136 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
:root{
--bg-color:#21295C;
--banner:#1B3B6F;
--lapis:#065A82;
--cerulean:#1C7293;
--popper:#9EB3C2;
}

body {
background: var(--bg-color);
color: aliceblue;
font-family: 'Poiret One',Arial, Helvetica, sans-serif;
}

.intro{
display: flex;
flex-direction:column;
align-content: center;
justify-content: center;
text-align: center;
background-color: rgb(0, 0, 76);
}

h1 {
font-family: 'Nabla';
font-size: 2.8rem;
font-variant: small-caps;

}

h2 {
font-size: .8rem;
font-style: italic;
}

.sliders {
display: flex;
align-items: center;
justify-content: space-evenly;
padding:10px;
height:130px;
margin-bottom: 20px;
}


fieldset {
height:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(var(--lapis)50%,navy);
}

.slider {
width: 400px;
align-self: stretch;
}

legend {
font-size: 1.8rem;
}

fieldset:first-of-type{
align-items: flex-start;
flex-wrap: wrap;
width:25%;
gap:4px;
}

fieldset:nth-of-type(2) {
width:30%;
}

input[type='number']{
height:3rem;
width:40%;
text-align: center;
font-size:1.5rem;
background-color: var(--popper);
}

button{
padding:15px;
background-color: var(--cerulean);
}

.list {
display: flex;
flex-wrap: wrap;
min-height: 560px;
gap:1%;
justify-content: space-evenly;
}

.aniContainer{
display:flex;
visibility: hidden;
flex-direction: column;
background-color: rgb(192, 192, 192);
padding:10px;
width: 23%;
min-height: 560px;
transition: ease-in-out 2s transform;
border:1px solid navy;
}

.aniContainer:hover{
transform: translateY(-2px);
}

.picture {
color: black;
height: 100%;
font-family: Arial, Helvetica, sans-serif;

background-size: cover;
background-repeat: no-repeat;
padding:10px 0px;
}

.words {
visibility: hidden;
background-color: rgba(255,255,255,.3);
height: 100%;
transition: all .5s ease-in;
}

.aniTitle {
background-color: var(--lapis);
}

.picture:hover > .words{
visibility: visible;
backdrop-filter: blur(10px);
}
169 changes: 169 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anime Recommendation Site</title>
<meta name="description" content="Give me new anime">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Nabla:EDPT@0..200&family=Poiret+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section class="intro">
<h1>Bangers, Only! (Anime Edition)</h1>
<h2 class="d">Ran out of anime to watch? Impossible! Here is a tool leveraging the AnList API to help you find some new anime.</h2>
</section>
<section class="sliders">
<fieldset>
<legend>Choose your genre</legend>
<div>
<input class="genre" id="Adventure" name= "Adventure" type="checkbox"><label for="Adventure">Adventure</label>
</div>
<div>
<input class="genre" id="Action" name="Action" type="checkbox"><label for="Action">Action</label>
</div>
<div>
<input class="genre" id="Romance" name="Romance" type="checkbox"><label for="Romance">Romance</label>
</div>
<div>
<input class="genre" id="Horror" name="Horror" type="checkbox"><label for="Horror">Horror</label>
</div>
<div>
<input class="genre" id="Comedy" name="Comedy" type="checkbox"><label for="Comedy">Comedy</label>
</div>
<div>
<input class="genre" id="Drama" name="Drama" type="checkbox"><label for="Drama">Drama</label>
</div>
<div>
<input class="genre" id="Ecchi" name="Ecchi" type="checkbox"><label for="Ecchi">Ecchi</label>
</div>
<div>
<input class="genre" id="Fantasy" name="Fantasy" type="checkbox"><label for="Fantasy">Fantasy</label>
</div>
<div>
<input class="genre" id="Mahou Shoujo" name="Mahou Shoujo" type="checkbox"><label for="Mahou Shoujo">Mahou Shoujo</label>
</div>
<div>
<input class="genre" id="Mecha" name="Mecha" type="checkbox"><label for="Mecha">Mecha</label>
</div>
<div>
<input class="genre" id="Music" name="Music" type="checkbox"><label for="Music">Music</label>
</div>
<div>
<input class="genre" id="Mystery" name="Mystery" type="checkbox"><label for="Mystery">Mystery</label>
</div>
<div>
<input class="genre" id="Psychological" name="Psychological" type="checkbox"><label for="Psychological">Psychological</label>
</div>
</fieldset>
<fieldset>
<legend>What's your lowest score threshold (out of 100)?</legend>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="scoreAvg">
<span id="score"></span>
</div>
</fieldset>
<fieldset>
<legend>What Year Would You Like?</legend>
<input type="number" id="year" name="year" min="1900" max="2025" value="2025">
</fieldset>
<fieldset>
<legend>Press the Button!</legend>
<button>Submit</button>
</fieldset>
</section>
<section class="list">
<section class="aniContainer">
<section class="aniTitle">
<h3></h3>
</section>
<section class="picture">
<section class="words">

<p></p>
</section>
</section>
</section>
<section class="aniContainer">
<section class="aniTitle">
<h3></h3>
</section>
<section class="picture">
<section class="words">

<p></p>
</section>
</section>
</section>
<section class="aniContainer">
<section class="aniTitle">
<h3></h3>
</section>
<section class="picture">
<section class="words">

<p></p>
</section>
</section>
</section>
<section class="aniContainer">
<section class="aniTitle">
<h3></h3>
</section>
<section class="picture">
<section class="words">

<p></p>
</section>
</section>
</section>
<section class="aniContainer">
<section class="aniTitle">
<h3></h3>
</section>
<section class="picture">
<section class="words">

<p></p>
</section>
</section>
</section>
<section class="aniContainer">
<section class="aniTitle">
<h3></h3>
</section>
<section class="picture">
<section class="words">

<p></p>
</section>
</section>
</section>
<section class="aniContainer">
<section class="aniTitle">
<h3></h3>
</section>
<section class="picture">
<section class="words">

<p></p>
</section>
</section>
</section>
<section class="aniContainer">
<section class="aniTitle">
<h3></h3>
</section>
<section class="picture"
<section class="words">

<p></p>
</section>
</section>
</section>
</section>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Loading