{"id":28248639,"url":"https://github.com/jardotnet/ironhack_mid-term-project","last_synced_at":"2026-05-05T20:40:48.511Z","repository":{"id":53930469,"uuid":"521924211","full_name":"jarDotNet/ironhack_mid-term-project","owner":"jarDotNet","description":"IronHack | Mid-Term Project","archived":false,"fork":false,"pushed_at":"2022-08-25T16:33:54.000Z","size":5648,"stargazers_count":0,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-19T12:16:49.388Z","etag":null,"topics":["404-page","animation-css","burger-menu","css","favicon","fetch-api","form-validation","html","javascript","responsive-web-design","scrolltop","webcomponents"],"latest_commit_sha":null,"homepage":"https://ironhack-midtermproject.netlify.app/","language":"CSS","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/jarDotNet.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}},"created_at":"2022-08-06T11:11:09.000Z","updated_at":"2022-09-23T10:18:55.000Z","dependencies_parsed_at":"2022-08-13T04:40:48.704Z","dependency_job_id":null,"html_url":"https://github.com/jarDotNet/ironhack_mid-term-project","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jarDotNet/ironhack_mid-term-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jarDotNet%2Fironhack_mid-term-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jarDotNet%2Fironhack_mid-term-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jarDotNet%2Fironhack_mid-term-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jarDotNet%2Fironhack_mid-term-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jarDotNet","download_url":"https://codeload.github.com/jarDotNet/ironhack_mid-term-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jarDotNet%2Fironhack_mid-term-project/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259627175,"owners_count":22886800,"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":["404-page","animation-css","burger-menu","css","favicon","fetch-api","form-validation","html","javascript","responsive-web-design","scrolltop","webcomponents"],"created_at":"2025-05-19T12:16:38.655Z","updated_at":"2026-05-05T20:40:48.482Z","avatar_url":"https://github.com/jarDotNet.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e \n    \u003cimg src=\"https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png\" alt=\"Ironhack Logo\"\u003e\n    \u003ch3 align=\"center\"\u003eIronhack mid-term project\u003c/h3\u003e\n    \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://ironhack-midtermproject.netlify.app\"\u003eView Netlify deployed demo\u003c/a\u003e\n        ·\n        \u003ca href=\"https://docs.google.com/presentation/d/1zq5UCTGFmIwVCnoiHEO381wEek_5xUDc566gDatwlnE\"\u003eView the presentation\u003c/a\u003e\n        ·\n        \u003ca href=\"https://raw.githubusercontent.com/ironhack-jc/mid-term-api/main/projects\"\u003eView the API endpoint\u003c/a\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n# Ironhack Mid-Term Project\n\nIronhack Frontend assignment project. The objective is to build and deploy a fictitious fully responsive Circle company website using technologies such as: HTML, CSS \u0026 JavaScript. Includes data fetching from an external Web API.\n\n\u003cbr\u003e\n\n![projectCircleAgency](./assets/readme/circle_agency.png)\n\n## About the project\n\nFrontend Development of a website for a fictional Circle web design company, with responsive design in three sizes (mobile, tablet and desktop).\n\n### Authors\n\n|                     | Name                | GitHub              |\n| :------------------ | :------------------ | :------------------ |\n| \u003ca href=\"https://github.com/albertsanle\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/108616960?v=4\" width=\"60\" height=\"60\" style=\"border-radius: 50%\" alt=\"alberto avatar\"\u003e\u003c/a\u003e | **Albert** | [**@albertsanle**](https://github.com/albertsanle) |\n| \u003ca href=\"https://github.com/Ester79\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/56604219?v=4\" width=\"60\" height=\"60\" style=\"border-radius: 50%\" alt=\"ester avatar\"\u003e\u003c/a\u003e | **Ester** | [**@Ester79**](https://github.com/Ester79)  |\n| \u003ca href=\"https://github.com/jarDotNet\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/10919691?v=4\" width=\"60\" height=\"60\" style=\"border-radius: 50%\" alt=\"jar avatar\"\u003e\u003c/a\u003e | **JA Reyes** | [**@jarDotNet**](https://github.com/jarDotNet) |\n\n### Objectives\n\n- Creation of several pages:\n  - a home,\n  - a “project” page and\n  - a contact page with a form.\n- Adding navigation between the pages.\n- Making all the fields in the contact form required before being able to submit it.\n- Adding animations to different sections (**bonus**).\n- Get the first three projects of the [API](https://raw.githubusercontent.com/ironhack-jc/mid-term-api/main/projects). This API returns the projects in descending order, so the first item of the array is the last project.\n- Validate the form using JavaScript. Show an alert if the name is equal to ironhack: \"You cannot be Ironhack, because I am Ironhack\". In addition, more filters can be added: incorrect email, required fields not set, etc.\n- Create the \"project\" page dynamically:\n  - **fetch** the API., using the *onload* event.\n  - **filter** the project with uuid and print the name, description, content, image and completed_on in the expected position of the page.\n  - *Other projects* should be other projects of the API. For example, if the project is filtered with uuid 1, other projects must be others. Take three other projects randomly (**bonus**).\n  - If the project does not exist in the API, you should **alert** the user.\n- Responsive menu. On click, toggle the menu (**bonus**).\n\n### Project assets\n\nFor this project, we had access to the following assets:\n\n- A [Figma](https://www.figma.com/file/bKFppfHiRq6xNedPILbRMu/mid-term-project) design that we had to turn into a live, responsive website. This design also includes a few specifications regarding fonts and colors.\n\n- A folder with all the images needed for this project.\n\n### Features\n\nThis project includes the following functionalities:\n\n- Responsive web dessign\n- Burger menu\n- JavaScript Fetch API \u0026 dynamic pages generation\n- Web components for the header, footer and newsletter\n- Scroll to top button in the home page\n- 404 Not Found error page\n- CSS animations for the Scroll to top and the 404 error page\n- Form validation\n- Modal vanilla js window to show messages\n- Favicon\n\n### Built With\n\n- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n- ![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge\u0026logo=netlify\u0026logoColor=#00C7B7)\n- ![Trello](https://img.shields.io/badge/Trello-%23026AA7.svg?style=for-the-badge\u0026logo=Trello\u0026logoColor=white)\n- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge\u0026logo=visual-studio-code\u0026logoColor=white)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjardotnet%2Fironhack_mid-term-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjardotnet%2Fironhack_mid-term-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjardotnet%2Fironhack_mid-term-project/lists"}