From 4acfa29a3d8680bd2c1cb487f9962744bb43241e Mon Sep 17 00:00:00 2001 From: efim Date: Wed, 27 Sep 2023 06:58:46 +0000 Subject: [PATCH] docs: readme for exercise 16 --- 16-countries-page-from-api/README.org | 136 ++++++++++++++++++ 16-countries-page-from-api/desktop-main.png | Bin 0 -> 198966 bytes 16-countries-page-from-api/desktop-single.png | Bin 0 -> 84585 bytes 16-countries-page-from-api/mobile-main.png | Bin 0 -> 33599 bytes 16-countries-page-from-api/mobile-single.png | Bin 0 -> 41667 bytes 5 files changed, 136 insertions(+) create mode 100644 16-countries-page-from-api/README.org create mode 100644 16-countries-page-from-api/desktop-main.png create mode 100644 16-countries-page-from-api/desktop-single.png create mode 100644 16-countries-page-from-api/mobile-main.png create mode 100644 16-countries-page-from-api/mobile-single.png diff --git a/16-countries-page-from-api/README.org b/16-countries-page-from-api/README.org new file mode 100644 index 0000000..2cb5dd1 --- /dev/null +++ b/16-countries-page-from-api/README.org @@ -0,0 +1,136 @@ +* Frontend Mentor - REST Countries API with color theme switcher solution +:PROPERTIES: +:CUSTOM_ID: frontend-mentor---rest-countries-api-with-color-theme-switcher-solution +:END: +This is a solution to the +[[https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca][REST +Countries API with color theme switcher challenge on Frontend Mentor]]. +Frontend Mentor challenges help you improve your coding skills by +building realistic projects. + +** Overview +:PROPERTIES: +:CUSTOM_ID: overview +:END: +*** The challenge +:PROPERTIES: +:CUSTOM_ID: the-challenge +:END: +Users should be able to: + +- See all countries from the API on the homepage +- Search for a country using an =input= field +- Filter countries by region +- Click on a country to see more detailed information on a separate page +- Click through to the border countries on the detail page +- Toggle the color scheme between light and dark mode /(optional)/ + +*** Screenshot +:PROPERTIES: +:CUSTOM_ID: screenshot +:END: +[[mobile-main.png]] +[[mobile-single.png]] +[[desktop-main.png]] +[[desktop-single.png]] + + +*** Links +:PROPERTIES: +:CUSTOM_ID: links +:END: +- Solution URL: https://github.com/efim/Learning-HTMX/tree/master/16-countries-page-from-api +- Live Site URL: https://efim-frontentmentor-countries-page.onrender.com/ + +** My process +:PROPERTIES: +:CUSTOM_ID: my-process +:END: +*** Built with +:PROPERTIES: +:CUSTOM_ID: built-with +:END: +- Scala Server Side Rendering +- Htmx +- TailwindCSS +- Flexbox +- CSS Grid +- Mobile-first workflow + + +*** What I learned +:PROPERTIES: +:CUSTOM_ID: what-i-learned +:END: +**** polling download for 'infinite scroll' +https://htmx.org/examples/infinite-scroll/ + +I've done almost same thing as example, +but i'm appending additional empty div, that inserts responses instead of itself + +this way i have one template fragment with repeater, +and don't have to add hx attributes to the last one, + +i just have separate fragment that i append to response which will trigger new +load on enter view. +**** having html 5 native autocomplete with tag +just server side rendering it with all country names is yay +**** inserting thymeleaf templates by css selector +https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#appendix-c-markup-selector-syntax + +this way i can insert