Skip to content

Commit

Permalink
Enhancing some ui stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
Mohab Yaser committed Nov 14, 2023
1 parent b3c3f14 commit 62b8ebc
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 53 deletions.
89 changes: 46 additions & 43 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,42 +55,42 @@ function dummy_data() {
document.getElementsByClassName("another-class");

from.value = '800';
to.value = '1000';
problems_cnt.value = '5';

add_handle('Mohab_Yaser');

let btns = document.getElementsByClassName("tag-btn");
btns[21].style.backgroundColor = green;
btns[23].style.backgroundColor = green;
btns[26].style.backgroundColor = green;

let problem_container = `
<div class="problem">
<button class="code-btn tooltip">
Copy Code
</button>
<button class="tags-btn tooltip">
Click to see tags
</button>
<button class="rate-btn tooltip">
Click to see rating
</button>
<a target="_blank" href="https://codeforces.com/problemset/problem/">
Go to problem
</a>
</div>`;

document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
to.value = '800';
problems_cnt.value = '2';

// add_handle('Mohab_Yaser');

// let btns = document.getElementsByClassName("tag-btn");
// btns[21].style.backgroundColor = green;
// btns[23].style.backgroundColor = green;
// btns[26].style.backgroundColor = green;

// let problem_container = `
// <div class="problem">
// <button class="code-btn tooltip">
// Copy Code
// </button>
// <button class="tags-btn tooltip">
// Click to see tags
// </button>
// <button class="rate-btn tooltip">
// Click to see rating
// </button>
// <a target="_blank" href="https://codeforces.com/problemset/problem/">
// Go to problem
// </a>
// </div>`;

// document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
// document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
// document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
// document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
// document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
// document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
// document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
// document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
// document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
// document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
}

window.addEventListener("load", () => {
Expand All @@ -114,7 +114,7 @@ window.addEventListener("load", () => {
});
}

// dummy_data();
dummy_data();
});

function http_request(url) {
Expand All @@ -135,6 +135,9 @@ async function valid_handle(handle) {
}

function add_handle(handle) {
if (document.getElementsByClassName("accepted-handle tooltip").length === 0)
document.getElementsByClassName("accepted-handles")[0].style.display = 'block';

document.getElementsByClassName(
"accepted-handles"
)[0].innerHTML += `<div class="accepted-handle tooltip">
Expand All @@ -151,6 +154,8 @@ function add_handle(handle) {
for (let i = 0; i < acc_handles.length; i++) {
acc_handles[i].addEventListener("click", (element) => {
element.srcElement.remove();
if (document.getElementsByClassName("accepted-handle tooltip").length === 0)
document.getElementsByClassName("accepted-handles")[0].style.display = 'none';
});
}
}
Expand Down Expand Up @@ -228,14 +233,9 @@ function validate_input() {
}

function valid_problem(problem, min, max, problems_out_of_scope, chosen_tags) {
if (!problems_out_of_scope.has(problem['name']))
if (problems_out_of_scope.has(problem['name']))
return false;

problems_out_of_scope.forEach((element) => {
if (element === problem['name'])
return false;
});

let rate = (problem['rating'] !== undefined ? problem['rating'] : 0);

if (rate < min || rate > max)
Expand Down Expand Up @@ -332,6 +332,8 @@ async function get_problems() {
}

function view_problems(problems) {
document.getElementsByClassName('problems-container')[0].style.display = 'grid';

let showed_tags = [];
let showed_ratings = [];
let showed_codes = [];
Expand Down Expand Up @@ -398,6 +400,7 @@ function view_problems(problems) {

function remove_old_problems() {
document.getElementsByClassName('problems-container')[0].innerHTML = '';
document.getElementsByClassName('problems-container')[0].style.display = 'none';
}

document.getElementsByClassName("gen-btn")[0].addEventListener("click", async() => {
Expand Down
22 changes: 12 additions & 10 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,18 +89,20 @@ input {
}

.accepted-handles {
display: none;
border: solid 2.5px lightgrey;
border-radius: 8px;
padding: 8px;
margin-top: 10px;
/* border: 4px solid grey; */
border-radius: 10px;
padding: 10px;
}

.accepted-handle {
display: grid;
margin-top: 3px;
margin-left: 3px;
border: 4px solid grey;
border-radius: 10px;
border: 3px solid lightgreen;
border-radius: 8px;
padding: 8px;
font-size: 16px;
font-family: 'Roboto', sans-serif;
Expand All @@ -111,20 +113,20 @@ input {
}

.accepted-handle:hover {
background-color: rgb(215 208 54);
background-color: #e1e179;
}

.accepted-handle:active {
background-color: red;
background-color: lightcoral;
}

.problems-container {
border: solid 2.5px lightgrey;
border-radius: 8px;
padding: 8px;
min-width: 600px;
margin-top: 10px;
/* border: 4px solid grey;*/
border-radius: 10px;
padding: 10px;
display: grid;
display: none;
grid-template-columns: auto;
}

Expand Down

0 comments on commit 62b8ebc

Please sign in to comment.