My normal and minimal solutions for CSSBattle challenges
Caution
Challenges like these are an opportunity to improve by coming up with your own solutions. Take your time and think about your approach. If you can't complete a challenge, skip it and come back to it later. Only look at someone else's solutions as a last resort, and treat it as a learning opportunity rather than a defeat.CSSBattle is an online game where players compete with each other to create the shortest and most effective CSS code to recreate visual shapes and patterns. CSSBattle is a fun and challenging way to improve CSS coding skills while competing with other players. It is the first ever code-golfing platform for CSS lovers.
Playing the game helps to better understand CSS and gives opportunity to use properties that are rarely used, but to climb the leaderboards it requires to exploit how HTML and CSS are parsed by browsers, therefore the code written here is not the way anyone would write it in a real project.
The project is a showcase of my solutions for CSSBattle challanges. Each solution contains an image that I had to recreate, as well as my normal and minimal solutions that accomplish this task.
Check out the live version of this project, as well as my CSSBattle profile.
Languages:
- HTML
- CSS
- JS
Libraries and frameworks:
Programs:
- Well-organized challenges files
- Nice and responsive UI
- Solution preview
- Code highlighting
- Character counter
- Loading real HTML for preview
- Switching between solutions
- List of challenges
- Selecting a challenge to preview
- Grouping by battle
- Disabling unattempted challenges
I do not own the rights to the content of the challenges. All challenge data was downloaded and included only to provide context for the solutions.
Solution preview has 3 sections:
- Code section shows:
- Hilighted code
- Characters count
- Preview section shows:
- Real html solution
- Switch between solutions
- Target section shows:
- Image target to recreate
- Links to challenge and battle
- Solution match precentage
Challenges list view shows all challenges grouped by battle in increasing order.
The challenges are numbered and can be in disbaled state that means I didn't attempt the challenge yet.
- 📁 CSSBattle-Solutions (project folder)
- 📄 github config
- 📄 readme file
- 📄 index.html file
- 📁 _for_readme - 📄 files for readme
- 📁 Images - 📄 images used in the project
- 📁 Scripts - 📄 scripts used in project
- 📁 Styles - 📄 css files used in project
- 📁 Challenges
- 📁 challenge_name
- 📄 .png target to recretae
- 📄 .html normal solution
- 📄 .html minimal solution
- 📁 other challenges...
- 📁 challenge_name
Warning
Classes must be loaded from bottom to the top to avoid situation when class does not exist in the time of its objects creation
This is the starting file of the program.
Contains the required data of challenges and battles:
- challenges [solved, folder_name, match_precentage]
- battles [battle_name, last_challenge_id]
Creates:
- ChallengesData
- SolutionPreview
Takes required data of challenges and battles and then:
- Creates array of challenges objects with challenge data and links to its resources
- Creates array of battles objects with with battle data and links to its resources
- Connects challenges to the battles which they are part of
Takes ChallengesData object, creates ChallengesList and is responsible for:
- Loading solution
- Counting solution length
- Hilighting code
- Switching between normal and minimal solution
Takes ChallengesData and SolutionPreview objects and is responsible for:
- Creating list of challenges grouped by battle
- Toggling list of all challenges
- Initializing the loading of another challenge solution preview