{"id":25320516,"url":"https://github.com/devphenom/google-homepage-sh","last_synced_at":"2025-10-28T23:31:50.531Z","repository":{"id":46200038,"uuid":"425047999","full_name":"devphenom/google-homepage-sh","owner":"devphenom","description":null,"archived":false,"fork":false,"pushed_at":"2021-11-07T20:28:41.000Z","size":571,"stargazers_count":0,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-09T08:10:57.681Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/devphenom.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":"2021-11-05T18:29:45.000Z","updated_at":"2021-11-07T20:28:44.000Z","dependencies_parsed_at":"2022-09-10T23:02:01.917Z","dependency_job_id":null,"html_url":"https://github.com/devphenom/google-homepage-sh","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devphenom%2Fgoogle-homepage-sh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devphenom%2Fgoogle-homepage-sh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devphenom%2Fgoogle-homepage-sh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devphenom%2Fgoogle-homepage-sh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devphenom","download_url":"https://codeload.github.com/devphenom/google-homepage-sh/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238741409,"owners_count":19522773,"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":[],"created_at":"2025-02-13T21:51:30.020Z","updated_at":"2025-10-28T23:31:45.167Z","avatar_url":"https://github.com/devphenom.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Google Homepage\n\n## About\n\nThis Project is to get our hands dirty (as a Team and Individually every member of SideHustle's Jon-Snow Team), to be able work as a team with the use of Git, GitHub Version Control System, while developing with React Framework, with other supporting technologies and dependencies from Node Package Manager:\nAnd Utilise all the concepts and Programming knowledge we have learnt through the two weeks of the program thus, far;\nto build a replica of the Popular Google Landing Page, with some specified functionalities and displays; given by our SideHustle Instructors.\n\n## Built With\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n- React.js\n- SCSS\n- JavaScript\n- HTML\n- CSS\n\n## Get Started (Resources)\n\n\u003e ### Link to Deployed-App\n\u003e\n\u003e see App [Team Jon-Snow](https://google-team-jon-snow.netlify.app/ \"SideHustle's Team Jon-Snow\")\n\u003e to view it in the browser.\n\nor copy-paste in Browser\u003chttps://google-team-jon-snow.netlify.app/\u003e\n\n\u003e spot the difference [Google Home_Page](https://google.com/ \"Visit Google's Homepage\")\n\u003e Visit Google site\n\n## Usage\n\n- When User first Enters the site!\n\n![When User first Enters the site!](./src/img/witLogo2_2021-11-06_23-51-59.jpg \"User visits\")\n\n- When User enters text in search-box!\n  ![When User enters text in search-box!](./src/img/witoutLogo_2021-11-06_23-51-59.jpg \"User inputs text in search-box\")\n\n### Functionalities\n\n#### Input text and the text replaces the logo in the Main Section\n\nwe use react useState, with the setTxt function to update the state;\nthe create another function that uses setTxt function to update the state more dynamically(its a EventHandler and its called when the EventListener is triggers).\nWe set parameter of setTxt using the Target property, as Target helps get the element (and maybe it's surrounding data; in this case the _value_) that triggers a specific event; as we used Event-listener _'onChange'_ on the element (input Element; that we wants it's data)\n\nWe give the useState parameter as _Null_ (which is the default value of the constant in the useState) to be able to use Ternary operator (more suitable than regular if statement), as Null is a falsy-value.\n\nThus, the const txt variable is initially Null, using Ternary we define a statement: when ever txt (which is Null by default until onChange listener is triggered and E-Handler renderUserText is used to make txt equal to the value in the search-box) is True (most values are true) the content in the Search-box should display as a h1, and with React States it will render these changes in the page DOM (from the Search-box) without refreshing the page of the User.\nWhile, when txt is false-(Null) SideHustle Logo should display instead of the value of txt variable.\n\n#### The Search feature that refer Users to Google site with their Query\n\n## Road-Map\n\n1. Setup React App and dependencies; then developed the _main Section_ Responsive UI (in which most of the features will be built upon)\n\n2. Created the _Repo_ on GitHub for the Team and Host the App on **Netlify**\n\n3. Used **React useState** to help develop the feature in which; while user type in the search box, the Side Hustle changes to the inputted text (in the search-box)\n\n4. Then developed the **search feature** in which; when Users search they'll be referred to Google site with their query/questions\n\n5. then developed the other sections of this project; Header and Footer section's _Responsive UI_\n\n6. Worked on our **HashNode Article:** About our Project and time with Side Hustle Cohort 4\\.0 program [Hashnode_Article](https://teamjonsnow.hashnode.dev/ \"Team-JonSnow Hashnode Article\")\n\n## Acknowledgement\n\n- [Material-UI/Core](https://mui.com/core/)\n- [Material-UI/Icon](https://mui.com/components/material-icons/)\n\n- [Awesome READMe Guide](https://github.com/othneildrew/Best-README-Template)\n\n## Contact\n\n- **Group Name:** Team_Jon-Snow\n\n- **Project Repo_Link:** _\u003chttps://github.com/devphenom/google-homepage-sh\u003e_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevphenom%2Fgoogle-homepage-sh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevphenom%2Fgoogle-homepage-sh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevphenom%2Fgoogle-homepage-sh/lists"}