diff --git a/main.js b/main.js index 9ca580a..0da3da0 100644 --- a/main.js +++ b/main.js @@ -50,6 +50,22 @@ function tags() { return needed_html; } +function dummy_data() { + let [from, to, problems_cnt] = + 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; +} + window.addEventListener("load", () => { document.getElementsByClassName("tags-container")[0].innerHTML = tags(); @@ -70,20 +86,25 @@ window.addEventListener("load", () => { } }); } + + // dummy_data(); }); -async function http_request(url) { - let response = await fetch(url); - let data = await response.json(); +function http_request(url) { + let response = fetch(url).then( + res => { + if (!res.ok) + return false; + else + return res.json(); + }).then(json => json); - return data; + return response; } async function valid_handle(handle) { - let data = await http_request(`https://codeforces.com/api/user.info?handles=${handle}`); - - if (data['status'] === 'FAILED') return false; - else return true; + let verdict = await http_request(`https://codeforces.com/api/user.info?handles=${handle}`); + return verdict; } function add_handle(handle) { @@ -109,7 +130,7 @@ function add_handle(handle) { document .getElementsByClassName("add-handle-btn")[0] - .addEventListener("click", () => { + .addEventListener("click", async() => { const handle = document.getElementById("handles").value; if (handle === "") @@ -118,13 +139,17 @@ document title: "Oops...", text: "Please Enter a handle!", }); - else if (!valid_handle(handle)) - Swal.fire({ - icon: "error", - title: "Oops...", - text: "Please Enter a valid handle!", - }); - else add_handle(handle); + else { + const handle_state = await (valid_handle(handle)); + if (!handle_state) { + Swal.fire({ + icon: "error", + title: "Oops...", + text: "Please Enter a valid handle!", + }); + } else + add_handle(handle); + } }); function validate_input() { @@ -175,11 +200,26 @@ function valid_problem(problem, min, max, problems_out_of_scope, chosen_tags) { return false; }); + let len = problem['tags'].length; + + if (len === 0) + return false; + + for (let i = 0; i < len; i++) { + let tag = problem['tags'][i]; + if (!chosen_tags.has(tag)) + return false; + } + return true; } -function shuffle(available_problems) { - return available_problems; +function shuffle(array) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; } async function get_problems() { @@ -192,8 +232,8 @@ async function get_problems() { let problems_out_of_scope = new Set(); - not_solved_by.forEach(async (handle) => { - let url = `https://codeforces.com/api/user.status?handle={handle}` + not_solved_by.forEach(async(handle) => { + let url = `https://codeforces.com/api/user.status?handle=${handle}` let submissions = await http_request(url); submissions['result'].forEach((submission) => { if (submission['verdict'] === 'OK') @@ -201,8 +241,6 @@ async function get_problems() { }); }); - console.log(problems_out_of_scope); - let chosen_tags = new Set(); let all_tags = document.getElementsByClassName("tag-btn"); @@ -229,24 +267,73 @@ async function get_problems() { available_problems.push(problem); }); - // available_problems = shuffle(available_problems); + available_problems = shuffle(available_problems); let problems_cnt = +(document.getElementsByClassName("another-class")[2].value); let final_problems = available_problems.slice(0, problems_cnt); - console.log(final_problems); - return final_problems; } function view_problems(problems) { + let showed_tags = []; + let showed_ratings = []; + for (let i = 0; i < problems.length; i++) { + let problem_container = ` + <div class="problem"> + <button class="code-btn tooltip"> + Code + <span class="tooltiptext"> + Click to copy problem code + </span> + </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/${problems[i]['contestId']}/${problems[i]['index']}"> + Go to problem + </a> + </div>`; + + showed_tags.push(problems[i]['tags']); + showed_ratings.push(problems[i]['rating']); + + document.getElementsByClassName('problems-container')[0].innerHTML += problem_container; + } + + let tags_btns = document.getElementsByClassName('tags-btn tooltip'); + + for (let i = 0; i < tags_btns.length; i++) { + let btn = tags_btns[i]; + + btn.addEventListener("click", () => { + Swal.fire({title: showed_tags[i]}); + }); + } + + let ratings_btns = document.getElementsByClassName('rate-btn tooltip'); + + for (let i = 0; i < ratings_btns.length; i++) { + let btn = ratings_btns[i]; + + btn.addEventListener("click", () => { + Swal.fire(showed_ratings[i].toString()); + }); + } +} +function remove_old_problems() { + document.getElementsByClassName('problems-container')[0].innerHTML = ''; } -document.getElementsByClassName("gen-btn")[0].addEventListener("click", () => { +document.getElementsByClassName("gen-btn")[0].addEventListener("click", async() => { if (validate_input() === true) { - let problems = get_problems(); - view_problems(problems); + remove_old_problems(); + let problems = await get_problems(); + await view_problems(problems); } }); \ No newline at end of file diff --git a/style.css b/style.css index 349347d..3a94b23 100644 --- a/style.css +++ b/style.css @@ -6,6 +6,10 @@ body { margin-bottom: 100px; } +a { + margin-top: 5px; +} + .tags-container { border: solid 2.5px; border-color: lightgrey; @@ -62,12 +66,14 @@ body { #handles { height: 25px; + width: 210px; border: 3px solid lightgrey; border-radius: 6px; } input { - font-size: 20px; + font-size: 19px; + font-family: calibri; } .accepted-handles { @@ -172,24 +178,6 @@ input { background-color: #16a942; } -.link-btn { - width: 80px; - height: 30px; - border: 2px solid green; - border-radius: 100px; - background-color: #00ff4c; - color: white; - font-family: sans-serif; - font-weight: bold; - font-size: 17px; - cursor: pointer; - transition: 0.5s; -} - -.link-btn:hover { - background-color: #16a942; -} - .tags-btn { width: 170px; height: 30px;