Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Google Translator in footer #324

Merged
merged 2 commits into from
Jun 22, 2024
Merged

Added Google Translator in footer #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
615e39c
added translator in footer
HishitaGupta Jun 22, 2024
68dc341
Merge branch 'Akshatchaube01:main' into translator
HishitaGupta Jun 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,19 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'en' },
'google_translate_element'
);
}
</script>
<script
type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
></script>


</head>
<body>
Expand Down
96 changes: 52 additions & 44 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,24 @@ import { useEffect, useState } from 'react';
import React from 'react';
import './Footer.css';


const quotes = [
"Innovation distinguishes between a leader and a follower.",
"Simplicity is the ultimate sophistication. ",
"Simplicity is the ultimate sophistication.",
"The secret of getting ahead is getting started.",
"All limitations are self-imposed.",
"Tough times never last but tough people do. ",
"Tough times never last but tough people do.",
"Strive for greatness.",
// Add more quotes as needed
];


const Footer = () => {



const [footerStyle, setFooterStyle] = useState({
color: 'black'
color: 'black'
});
const [quote, setQuote] = useState(quotes[Math.floor(Math.random() * quotes.length)]);

let savedTheme;

const [quote, setQuote] = useState(quotes[Math.floor(Math.random() * quotes.length)]);

useEffect(() => {
savedTheme = localStorage.getItem('theme') || 'light';
let savedTheme = localStorage.getItem('theme') || 'light';
setFooterStyle({
color: savedTheme === 'light' ? 'white' : 'white',
backgroundColor: savedTheme === 'light' ? '#0ea5e9' : '',
Expand All @@ -39,8 +32,25 @@ const Footer = () => {
});
}, 10000); // changes every 10 seconds

// Add Google Translate script
const addGoogleTranslateScript = () => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
document.body.appendChild(script);
};

window.googleTranslateElementInit = () => {
new window.google.translate.TranslateElement(
{ pageLanguage: 'en' },
'google_translate_element'
);
};

addGoogleTranslateScript();

return () => clearInterval(intervalId); // cleanup interval on component unmount
}, [savedTheme]);
}, []);

return (
<footer className="footer" style={footerStyle}>
Expand All @@ -50,7 +60,7 @@ const Footer = () => {
<ul className="contact-list">
<li style={footerStyle}>
<i className="fas fa-envelope"></i>&nbsp;&nbsp;
<a style={footerStyle} sty href="mailto:[email protected]">[email protected]</a>
<a style={footerStyle} href="mailto:[email protected]">[email protected]</a>
</li>
<li style={footerStyle}>
<i className="fas fa-phone"></i>&nbsp;&nbsp;
Expand Down Expand Up @@ -93,6 +103,7 @@ const Footer = () => {
<p>
<cite style={footerStyle}>{quote}</cite>
</p>
<div id="google_translate_element" className="mt-5 p-2 bg-white rounded-md shadow-md"></div>
</div>
<div className="footer-section social-media">
<h4><strong style={footerStyle}>Follow Us</strong></h4>
Expand Down Expand Up @@ -122,33 +133,30 @@ const Footer = () => {
<div className="footer-section social-media">
<h4><strong style={footerStyle}>Company</strong></h4>
<ul className="social-list">
// <li style={footerStyle}>
<a style={footerStyle} href="/privacy-policy" target="_blank" rel="noopener noreferrer">
Privacy policys
</a>
</li>
<li style={footerStyle}>
<a style={footerStyle} href="/terms-and-conditions" target="_blank" rel="noopener noreferrer">
Terms & conditions
</a>
</li>
<li>
<input type="text" placeholder='Enter your email' className='p-1 rounded-md' />
</li>
<li>
<button className='border px-2 py-1 rounded-sm'>subscribe</button>
</li>
</ul>
</div>
</div>
<div className="footer-bottom">
<p style={footerStyle}>© 2024 TimeWarp. All rights reserved.</p>
</div>
</footer>
);
};


export default Footer;

<li style={footerStyle}>
<a style={footerStyle} href="/privacy-policy" target="_blank" rel="noopener noreferrer">
Privacy Policy
</a>
</li>
<li style={footerStyle}>
<a style={footerStyle} href="/terms-and-conditions" target="_blank" rel="noopener noreferrer">
Terms & Conditions
</a>
</li>
<li>
<input type="text" placeholder="Enter your email" className="p-1 rounded-md" />
</li>
<li>
<button className="border px-2 py-1 rounded-sm">Subscribe</button>
</li>
</ul>
</div>
</div>
<div className="footer-bottom">
<p style={footerStyle}>© 2024 TimeWarp. All rights reserved.</p>
</div>
</footer>
);
};

export default Footer;