Skip to content
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

Jump to bottom

search bar #470

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

search bar #470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e6a8ebf
h1 tag and title
yukibae Oct 19, 2022
a548a5c
header
yukibae Nov 12, 2022
09dbae0
create the wrapper class and the header
yukibae Dec 8, 2022
c93e152
fixing wrapper closing dic placement
yukibae Dec 8, 2022
5736aa7
the past_game box class added
yukibae Dec 8, 2022
6f73386
footer added
yukibae Dec 8, 2022
d9b5b39
container class and h3 add
yukibae Dec 8, 2022
7b88957
ranked flex and solo buttons
yukibae Dec 8, 2022
2f48be5
champion box and face class
yukibae Dec 8, 2022
35b933b
css:container,search-bar,search-bar input,placehol
yukibae Dec 12, 2022
ff0be3a
search bar
yukibae Dec 12, 2022
f4aed2a
corrections
yukibae Dec 12, 2022
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
Binary file added client/images/search.jpg
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.
28 changes: 27 additions & 1 deletion client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,36 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Group Project Base</title>
<title>League of Legends Database</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class= "wrapper">
<!--wrapper-->
<header class="header"> <h1>League of Legends Database</h1></header>
<!--header-->
<div class="container">
<!--container-->
<form action="/api" class="search-bar">
<input type="text" placeholder="search summoner name" name="q">
<button type="submit"><img src="images/search.jpg"></button>id

</div>
</div>

</div>
</div>
<div class="past_game box">
<!--right_section box-->
<h2> past game history</h2>

</div>
<h2>In game Ranks</h2>

</div>

<footer class="footer">idk what to write yet</footer>
<script src="./script.js"></script>
</body>
</html>
35 changes: 35 additions & 0 deletions client/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import express from 'express';
import fetch from 'node-fetch';


const playerIcon_Router = 'http://ddragon.leagueoflegends.com/cdn/12.23.1/img/profileicon/';

const api_key = 'RGAPI-062e92d3-35db-4742-a98c-48230a1840e4';

function injectHTML(list){
const target = document.querySelector('#results');
target.innerHTML = '';
const listEl = document.createElement('ol');
target.appendChild(listEl);

list.forEach((item) => {
const el = document.createElement('li');
el.innerText = item.name;
listEl.appendChild(el);
});
}
async function mainEvent(){
const submit = document.querySelector('#sumbit');
const form = document.querySelector('#form')
form.addEventListener('sumbit',(SubmitEvent) => {
SubmitEvent.preventDefault();
const api_url = 'https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/{summonerName}/' + playerName + '?' + api_key;
const reponse = await fetch(api_url);
let data = await reponse.json();
list=
});


console.log(data)

}
55 changes: 55 additions & 0 deletions client/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

.container{
width: 100%;
min-height: 100vh;
padding: 5%;
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(1,1,1,0.9), url())
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}

.search-bar{
width: 100%;
max-width: 700px;
background:rgba(0,0,0,0.3);
display: flex;
align-items: center;
border-radius: 60px;
padding: 10px 20px;
}

.search-bar input{
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 24px 20px;
font-size: 20px;
color:aqua;
}

::placeholder{
color:aliceblue;
}

.search-bar button img{
width 25px;
}

.search-bar button{
border: 0;
border-radius: 50%;
width: 60px;
height: 60px;
background: pink;
cursor: pointer;
}