{"id":20859279,"url":"https://github.com/totaro/abako","last_synced_at":"2026-04-11T00:47:52.893Z","repository":{"id":176864207,"uuid":"565518120","full_name":"totaro/abako","owner":"totaro","description":"Assignment (UX/UI/Frontend). Html/Css/JavaScript","archived":false,"fork":false,"pushed_at":"2023-08-23T14:49:43.000Z","size":547,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-19T07:25:47.948Z","etag":null,"topics":["bootstrap","css","font-awesome","html","html-css-javascript","javascript","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/totaro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-13T16:58:07.000Z","updated_at":"2024-01-24T00:28:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"fd37ed78-6cb6-45ac-84ee-b0a716cf7a87","html_url":"https://github.com/totaro/abako","commit_stats":null,"previous_names":["totaro/abako"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaro%2Fabako","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaro%2Fabako/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaro%2Fabako/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/totaro%2Fabako/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/totaro","download_url":"https://codeload.github.com/totaro/abako/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243230092,"owners_count":20257644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","font-awesome","html","html-css-javascript","javascript","webcomponents"],"created_at":"2024-11-18T04:49:18.250Z","updated_at":"2025-12-28T04:13:01.189Z","avatar_url":"https://github.com/totaro.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Assignment (UX/UI/Frontend)\n\nTehtävänanto\n\n1. Jalostaa oheisesta Intranet-mallisivusta HTML5-versio käyttäen erillistä CSS-tyylitiedostoa. Käytä layoutin taittoon Bootstrap -kirjastoa. Ensimmäisen osuuden tavoitteena on nähdä ohjelmoijan taidot CSS Frameworkin ja Flexboxin hyödyntämisessä, sekä selkeän HTML \u0026 CSS tuottamisessa.\n\n2. Hyödyntää ikonikirjastoa. Kuvassa olevat ikonit ovat Font Awesome -ikonifonttikirjastosta. Voit käyttää työssä myös jotakin muuta ikonikirjastoa, eikä ikonien tarvitse olla juuri esimerkissä löytyviä. Esimerkissä on käytetty versiota 4, mutta voit käyttää uusintakin.\n\n3. Käyttää ulkoista tietolähdettä JavaScriptillä. Vasemmassa palstassa näkyvä navigaatio muuttuu usein; tavoitteena on selvittää ohjelmoijan kyky hyödyntää ulkoista dataa webbisivulla, eli tässä tapauksessa sen avulla navigaation rakentamiseen. Luo kuvan mukainen navigaatio ulkoiseen tiedostoon, ja näytä se sivustolla valitsemallasi tavalla.\n\n4. Käyttää vähintään yhtä Web Componenttia jonkin sivulla toistuvan HTML-rakenteen kapselointiin custom elementiksi.\n\n\u003cimg src=\"screenshots/rekryintra.png\"\u003e\n\nRatkaisu\n\nTyö/käyttöympäristö: IDE: Visual Studio Code (+ Live Server http://127.0.0.1/) , Selain: Chrome\n\nTyöprosessin kuvaus:\n\n1. En ole ennen tehnyt sivustoa alusta asti Bootstrap kehitysympäristöllä (olen ennen modifoinut jo valmiita Bootstrap-sivustoja)\njoten ensin opiskelua mitä tarvitaan sivuston luomiseen. Tämän jälkeen tein simppelin flexbox sivun muutamalla columnilla joten\nnäen ja ymmärrän miten Bootstrap toiminnan.\n\n2. Tämän jälkeen kokosin haluttua mallikuvaa mukaillen sivupohjan pelkistetyn gridin jotta sain kaikki sivuston elementit\noikeille paikoilleen. Tässä itselleni apuna laitoin tiettyihin pääelementteihin (```\u003cdiv class=\"container\"\u003e, \u003cdiv class=\"row\"\u003e```\nsekä ```\u003cdiv class=\"col-sm\"\u003e```) väliaikaiset inline tyylit (border: 1px solid black) jolla hahmotin että missä minkäkin elementin\npitää olla ja onko elementin oikeilla paikoillaan. Seuraavana lisäsin sivupohjaan header ja footer elementit.\n\n3. Seuraavana työvaiheena oli sivun vasemmassa ja oikeassa reunassa olevat navigaatioden lisääminen javacriptilla suoraan\nsivupohjan oikeaan elementtiin (\u003cscript\u003e ...code ...\u003c/script\u003e). Navigaatioissa oleva data tehtiin JSON -muotoon ja tämä\nmuuttujassa oleva JSON data loopattiin sivulle .map() funktion avulla. Näin saatiin tulostettua sivulle oikeanlainen\nnavigaatioiden sisältö.\n\n4. Sivun tekstisisältöjen lisäys eli otsikot, murupolku, artikkelin teksti sekä kuva, headerin ja footerin tekstit.\n\n5. Tyylien lisääminen oli seuraava työvaihe. Oman tyylitiedoston luominen johon omia tyyliluokkia halutuilla väriarvoilla\neri elementeille, tekstien ja taustojen värit, borderit/paddingit, hoverit yms. jotta sain mahdollisimman lähelle haluttua\nsivuston mallikuvaa.\n\n6. Font Awesome ei ollut minulle ennalta tuttu joten siihen tutustuminen. Olen käyttänyt Reactin MUI kirjastoa joka on\nperiaatteellisesti samanlainen ikoni-kirjasto joten siinä mielessä tämä oli tuttua. Tyylitiedoston linkki sivun Headiin\nja etsimään samanlaisia ikonia joita oli esimerkkisivussa ja niiden lisääminen headerin oikeassa reunassa olevaan\nosioon, Oikeat ikonit Turvallisuusohjeet 2020 -otsikon eteen sekä artikkelin kirjoittajan blokkiin.\n\n7. Oikeiden ikonien lisääminen oikeassa reunassa olevaan navigaatioon oli seuraava työvaihe. Lisäsin JSON -dataan uuden\nkey/value -parin johon lisäsin halutun ikonin haluttuun navigation kohtaan (esim. fa: \"fa-desktop\") ja tulostin sen\n.map() funktioon (```\u003ci class=\"fa ${item.fa}\"\u003e\u003c/i\u003e```).\n\n8. Web Componentit olivat minulle suht uusi asia eli en ollut niitä itse tehnyt. Tehtävänantona oli tehdä toistuvan\nHTML-rakenteen custom elementti. Tutustumisen ja opiskelun kautta tein kaksi peruskomponenttiä jotka toistuvat\nsivupohjassa eli headerissa oleva firman nimi Abako (```\u003cabako-home\u003e\u003c/abako-home\u003e```) sekä footerissä oleva Abakon\nyhteystiedot (```\u003cabako-connect-info\u003e\u003c/abako-connect-info\u003e```).\n\n9. Viimeisenä isompana tehtävä oli saada vasemmanreunan navigaation tiedot tulemaan ulkoisesta tietolähteestä eli\npäätin että tämä ulkoinen tietolähde on erillinen json -tiedosto. Tässä oli monenlaista ongelmaan pitkin tätä projektia\nkun yritin aina välillä palata tämän osion ratkaisuun. Ongelmat johtuivat pääasiassa siitä että kun avaa selaimella suoraan\nindex.html -tiedostoa niin javascript -tiedostojen tuomisen yhteydessä tulee monenlaista virheilmoituksia esimerkiksi\nCORS politiikkaan liittyen, eli ei voi avata js-tiedostoja. Tässä ratkaisuna on että json/js tiedostot on ajettava joko\nlokaalilla tai remote serverillä. Visual Studio Codessa on Live Server joka luo lokaalin serverin (http://127.0.0.1/)\njonka kautta nämä CORS -ongelmat poistuivat ja sain importattua vasemman navigaation datan suoraan erillisestä json -tiedostosta\n(/json/leftNavigation.json) javascript tiedostoon (/js/navigation.js) jonka kautta navigaatio luodaan index.html -sivulle.\n\n10. Lopuksi siivosin vielä kaikista tiedostoista käyttämättömät koodirivit millä ei ole enää käyttöä sekä poistin inline-tyylit html-tiedostosta ja siirsin ne haettavaksi tyylitiedostosta. \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotaro%2Fabako","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftotaro%2Fabako","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotaro%2Fabako/lists"}