From dfec235ab2c233550a8f239eb60d17c2499a4959 Mon Sep 17 00:00:00 2001 From: Mohab Yaser Date: Wed, 8 Nov 2023 22:31:29 +0200 Subject: [PATCH] Finished the ui and part of the js events --- index.html | 224 +++++------------------------------------------------ main.js | 184 +++++++++++++++++++++++++++++++++---------- main.py | 2 +- style.css | 44 ++++++----- 4 files changed, 189 insertions(+), 265 deletions(-) diff --git a/index.html b/index.html index 3d5af0c..a4f3a95 100644 --- a/index.html +++ b/index.html @@ -7,222 +7,36 @@ Codeforces Problem Selector -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - +
+
+ +
+ From + +
+ +
+ To + +
-
- - + +
+ Number of problems (1 - 50) +
-
- -
- Mohab_Yaser - - Click to remove - -
- -
- Mohab_Yaser - - Click to remove - -
- -
- Mohab_Yaser - - Click to remove - -
- -
- Mohab_Yaser - - Click to remove - -
- -
- Mohab_Yaser - - Click to remove - -
- -
- Mohab_Yaser - - Click to remove - -
- -
- Mohab_Yaser - - Click to remove - -
- -
- Mohab_Yaser - - Click to remove - -
- - +
-
-
- - - - -
+
-
- - - - -
- -
- - - - -
- -
- - - - -
- -
- - - - -
-
-

- + \ No newline at end of file diff --git a/main.js b/main.js index 449796a..df71a5b 100644 --- a/main.js +++ b/main.js @@ -1,59 +1,165 @@ // const Swal = require('sweetalert2') // import Swal from 'sweetalert2' +function tags() { + const tags_list = [ + '2-sat', + 'binary search', + 'bitmasks', + 'brute force', + 'combinatorics', + 'constructive algorithms', + 'data structures', + 'dfs and similar', + 'divide and conquer', + 'dp', + 'dsu', + 'expression parsing', + 'fft', + 'flow', + 'games', + 'geometry', + 'graph matchings', + 'graphs', + 'greedy', + 'hashing', + 'implementation', + 'interactive', + 'math', + 'matrices', + 'number theory', + 'probability', + 'schedules', + 'shortest path', + 'sorting', + 'strings', + 'ternary search', + 'trees', + 'two pointers' + ]; -let btns = document.getElementsByClassName('tag-btn'); + let needed_html = ''; -for (let i = 0; i < btns.length; i++) { - let element = btns[i]; - let green = "rgb(51, 172, 113)"; - let blue = "rgb(0, 188, 212)"; + tags_list.forEach( + (tag) => { + needed_html += ``; + } + ); - element.style.backgroundColor = blue; + return needed_html; +} - element.addEventListener("click", - () => { - if (element.style.backgroundColor == blue) { - // Include - element.style.backgroundColor = green; - } else { - // Exclude - element.style.backgroundColor = blue; - } +window.addEventListener('load', + () => { + document.getElementsByClassName('tags-container')[0].innerHTML = tags(); + + let btns = document.getElementsByClassName('tag-btn'); + const green = "rgb(51, 172, 113)"; + const blue = "rgb(0, 188, 212)"; + + for (let i = 0; i < btns.length; i++) { + let element = btns[i]; + + element.style.backgroundColor = blue; + + element.addEventListener("click", + () => { + if (element.style.backgroundColor == blue) { + // Include + element.style.backgroundColor = green; + } else { + // Exclude + element.style.backgroundColor = blue; + } + } + ); } - ); + } +); + +function valid(handle) { + const url = `https://codeforces.com/api/user.info?handles=${handle}`; + // Make the API call here adn store it in 'response' + let response = fetch(url); + console.log(response); + // return response.status === 'FAILED'; } -let rating_slider = document.getElementById('rating'); +function add_handle(handle) { + // if (document.getElementsByClassName('accepted-handles').length === 0) { + // document.getElementsByClassName('handles-container')[0].innerHTML += + // '
'; + // } + + document.getElementsByClassName('accepted-handles')[0].innerHTML += + `
+ ${handle} + + Click to remove + +
`; + + document.getElementById('handles').value = ''; -rating_slider.addEventListener("change", + let acc_handles = document.getElementsByClassName('accepted-handle tooltip'); + + for (let i = 0; i < acc_handles.length; i++) { + acc_handles[i].addEventListener('click', + (element) => { + // if (document.getElementsByClassName('accepted-handle tooltip').length === 1) + // document.getElementsByClassName('accepted-handles')[0].remove(); + // else + element.srcElement.remove(); + } + ); + } +} + +document.getElementsByClassName('add-handle-btn')[0].addEventListener('click', () => { - // console.log(rating_slider.value); - }); + const handle = document.getElementById('handles').value; + + if (handle === '') + alert('Please Enter a handle'); + else if (!valid(handle)) + alert('Please Enter a valid handle'); + else + add_handle(handle); + } +); + +function validate_input() { + let [from, to, problems_cnt] = document.getElementsByClassName('another-class'); + + from = +from.value; + to = +to.value; + problems_cnt = +problems_cnt.value; -function valid_handle(handle) { - if (handle == '') + if (from % 100 !== 0 || to % 100 !== 0 || from > to) { + alert('Please Enter a valid ratings'); return false; + } else if (from > 3500 || from < 800 || to > 3500 || to < 800) { + alert('Please Enter a valid rating boundaries (800 - 3500)'); + return false; + } else if (problems_cnt < 1 || problems_cnt > 50) { + alert('Enter a valid number of problems (1 - 50)'); + return false; + } else return true; +} + +function get_problems() { - let url = `https://codeforces.com/api/user.status?handle=${handle}`; - return true; } -let add_handle_btn = document.getElementsByClassName('add-handle-btn')[0]; +function view_problems() { + +} -add_handle_btn.addEventListener('click', +document.getElementsByClassName('gen-btn')[0].addEventListener('click', () => { - let handle = document.getElementById('handles').value; - - if (valid_handle(handle)) { - - } else { - // Swal.fire({ - // title: 'Error!', - // text: 'Invalid Codefroces Handle', - // icon: 'error', - // confirmButtonText: 'Try again' - // }); - alert('Invalid Codeforces Handle'); + if (validate_input() === true) { + let problems = get_problems(); + view_problems(); } - }); \ No newline at end of file + } +); \ No newline at end of file diff --git a/main.py b/main.py index 3ec1c35..ca4d349 100644 --- a/main.py +++ b/main.py @@ -4,7 +4,7 @@ import argparse # handles to choose problems not problems not solved by any one of them -not_solved_by = ['wrong_handle'] +not_solved_by = ['Mohab_Yaser'] # problems not solved by any handle in "not_solved_by" problems_out_of_scope = set([]) diff --git a/style.css b/style.css index f6c730e..c837c57 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,9 @@ body { max-width: 800px; + min-width: 600px; margin: auto; + margin-top: 100px; + margin-bottom: 100px; } .tags-container { @@ -24,29 +27,17 @@ body { transition: 0.5s; } -.rating-slider-container{ +.rating-container{ margin-top: 10px; margin-bottom: 10px; } -.prob-num-slider-container { +.prob-num-container { margin-top: 10px; margin-bottom: 10px; } -.rating-label { - font-weight: bold; - font-family: sans-serif; - font-size: 18px; -} - -.handles-label { - font-weight: bold; - font-family: sans-serif; - font-size: 18px; -} - -.prob-num-label { +.rating-label, .prob-num-label, .handles-label { font-weight: bold; font-family: sans-serif; font-size: 18px; @@ -81,7 +72,7 @@ input { .accepted-handles { margin-top: 10px; - border: 4px solid grey; +/* border: 4px solid grey;*/ border-radius: 10px; padding: 10px; } @@ -110,15 +101,16 @@ input { } .problems-container { + min-width: 600px; margin-top: 10px; - border: 4px solid grey; +/* border: 4px solid grey;*/ border-radius: 10px; padding: 10px; display: grid; + grid-template-columns: auto; } .problem { - display: grid; margin: 3px; border: 4px solid grey; border-radius: 10px; @@ -129,7 +121,7 @@ input { transition: 0.5s; cursor: pointer; display: grid; - grid-template-columns: auto auto auto auto auto; + grid-template-columns: auto auto auto auto; } .tooltip { @@ -151,7 +143,7 @@ input { border-radius: 6px; width: 120px; bottom: 130%; - left: 10%; + right: 10%; position: absolute; z-index: 1; transition: 0.5s; @@ -253,4 +245,16 @@ input { .gen-btn:hover { background-color: #e346e3; +} + +.some-class { + font-size: 15px; + font-style: italic; +} + +.another-class { + border: 2px solid lightgrey; + border-radius: 4px; + width: 50px; + font-size: 15px; } \ No newline at end of file