{"id":18331224,"url":"https://github.com/bankole2000/netflix","last_synced_at":"2025-07-05T04:40:56.454Z","repository":{"id":41201905,"uuid":"187967660","full_name":"Bankole2000/netflix","owner":"Bankole2000","description":"Netflix homepage clone. Simple HTML CSS JS excercise","archived":false,"fork":false,"pushed_at":"2023-10-04T20:07:02.000Z","size":1072,"stargazers_count":138,"open_issues_count":9,"forks_count":64,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T16:43:10.150Z","etag":null,"topics":["clone","css-grid","css3","netflix"],"latest_commit_sha":null,"homepage":"https://bankole2000.github.io/netflix","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/Bankole2000.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":"2019-05-22T05:17:53.000Z","updated_at":"2025-03-27T12:03:20.000Z","dependencies_parsed_at":"2023-01-31T19:31:42.920Z","dependency_job_id":null,"html_url":"https://github.com/Bankole2000/netflix","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bankole2000%2Fnetflix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bankole2000%2Fnetflix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bankole2000%2Fnetflix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bankole2000%2Fnetflix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bankole2000","download_url":"https://codeload.github.com/Bankole2000/netflix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247425799,"owners_count":20937017,"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":["clone","css-grid","css3","netflix"],"created_at":"2024-11-05T19:28:46.205Z","updated_at":"2025-04-06T02:30:55.967Z","avatar_url":"https://github.com/Bankole2000.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Netflix Clone\n\nClone of the Netflix website as a light HTML CSS and JS excercise - [Take a look](https://bankole2000.github.io/netflix)\n\n[![Practice](https://img.shields.io/badge/Practice-HTML/CSS/JS-orange.svg)](https://bankole2000.github.io/netflix)\n\n_\u003cp align=\"center\"\u003e\"Eating website for fun... nyom nyom nyom\"\u003c/p\u003e_\n\n\u003cdiv align=\"center\" style=\"text-align:center; margin:auto;\"\u003e\n\u003cimg align=\"center\" src=\"https://i.imgur.com/EgCvXyK.png\" width=\"150\"/\u003e\n\u003c/div\u003e\n\n## What it is\n\nA basic warmup exercise. Simple, practice oriented, clone of the Netflix Homepage. Built with:\n\n- HTML\n- CSS\n- Vanilla JS - ES6\n- [Awesomeness](https://www.wikihow.com/Love-Programming) - Strictly for the love of coding :-)\n\n## What it does\n\n- Look pretty, that's about it :-)\n\n## Learning Points\n\n- CSS Grid\n- Styling Tables\n- Tabs with Javascript\n- Positioning\n\n## Some cool stuff\n\nUsually, people tend to run to CSS Frameworks to develop and style tabs and switching tabs. But here's a pretty simple, basic way of creating switchable tab content using Vanilla JS:\n\n```javascript\nconst tabItems = document.querySelectorAll(\".tab-item\");\nconst tabContentItems = document.querySelectorAll(\".tab-content-item\");\n\n// Select tab content\nfunction selectItem(e) {\n  removeBorder();\n  removeShow();\n  // Add border to current tab\n  this.classList.add(\"tab-border\");\n  // Grab content item from DOM\n  const tabContentItem = document.querySelector(`#${this.id}-content`);\n  // Add show class\n  tabContentItem.classList.add(\"show\");\n}\nfunction removeBorder() {\n  tabItems.forEach(item =\u003e item.classList.remove(\"tab-border\"));\n}\nfunction removeShow() {\n  tabContentItems.forEach(item =\u003e item.classList.remove(\"show\"));\n}\n// Listen for tab click\ntabItems.forEach(item =\u003e item.addEventListener(\"click\", selectItem));\n```\n\nAnd for the HTML All you really need is this:\n\n```html\n\u003c!-- Content Pretty Long so I'll add later --\u003e\n\u003c!-- But this is the basic gist --\u003e\n\u003cdiv class=\"tab-item\"\u003e\n  \u003c!-- Selectors for the different tab content --\u003e\n\u003c/div\u003e\n\u003cdiv class=\"tab-content-item\"\u003e\n  \u003c!-- Content of each tab item --\u003e\n\u003c/div\u003e\n\u003c!-- Simply add more selectors and corresponding \ntab content for each selector --\u003e\n```\n\n\u003e Also (Just a thought), You could advance this by adding some animations to the selector borders etc.\n\n## Features in Development\n\nI might add the other pages on the Netflix website if I ever come back to refactor ^-^\n\n## Contribution\n\nContributions are highly welcome. Feel free to fork, clone, make pull requests, report issues etc.\n\n## Acknowledgments\n\n- Many thanks to [@bradtraversy](https://github.com/bradtraversy) for his awesome courses - _i will not fail you sensei_\n- Thanks to [@torvalds](https://github.com/torvalds) For Making the world a better place\n- And To anyone reading this... _You're awesome!_\n\nThat being said\n_\u003cp align=\"center\"\u003eTo the Front... to the Back... End to End... cut no slack. Making ends meet. lol\u003c/p\u003e_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbankole2000%2Fnetflix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbankole2000%2Fnetflix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbankole2000%2Fnetflix/lists"}