I am trying to make the google recaptcha function properly on nodejs.
Currently the recaptcha doesn't work with the login function.
I want it to be required for the user to solve the recaptcha before logging in.
If you have any information on how to do this please let me know, I truly appreciate it
What I have in login.jsx is:
import { useContext,useRef } from "react";
import "./login.css";
import {loginCall} from "../../apiCalls";
import {AuthContext} from "../../context/AuthContext";
import {CircularProgress} from "#material-ui/core";
import {Link} from "react-router-dom";
import ReCAPTCHA from "react-google-recaptcha";
import ReactDOM from 'react-dom'
// This is for recaptcha:
function onChange(value) {
console.log("Captcha value:", value);
}
ReactDOM.render(
<ReCAPTCHA class = "reCAPTCHA"
sitekey="6LfOgRwfAAAAAE5mPhZiirYWIRhY-Tt5Sb5SQOt_"
onChange={onChange}
required
/>,
document.body.appendChild(document.createElement("root"))
);
////
export default function Login() {
const username = useRef();
const password = useRef();
const { user, isFetching, dispatch } = useContext(AuthContext);
const handleClick = (e) => {
e.preventDefault();
console.log("clicked");
loginCall(
{ username: username.current.value, password: password.current.value },
dispatch
);
};
console.log(user);
return (
<div className="login">
<div className="loginWrapper">
<div className="loginLeft">
<h3 className="loginLogo">Cybercsun</h3>
<span className="loginDesc">
Connect with friends and the world around you on Cybercsun.
</span>
</div>
<div className="loginRight">
<form className="loginBox" onSubmit={handleClick}>
<input
placeholder="Username"
type="username"
required
className="loginInput"
ref={username}
/>
<input
placeholder="Password"
type="password"
required
minLength="3"
className="loginInput"
ref={password}
/>
<button className="loginButton" type="submit" disabled={isFetching}>
{isFetching
? <CircularProgress color="white" size="20px"/>
: "Log In"}
</button>
<span className="loginForgot">Forgot Password?</span>
<Link to="/register" className="loginRegisterButton">
<button className="loginRegisterButton">
{isFetching ? (
<CircularProgress color="white" size="20px" />
) : (
"Create a New Account"
)}
</button>
</Link>
</form>
</div>
</div>
</div>
);
}
And this is what I have in login.css:
.login {
width: 100vw;
height: 100vh;
background-color: #f0f2f5;
display: flex;
align-items: center;
justify-content: center;
}
.loginWrapper {
width: 70%;
height: 70%;
display: flex;
}
.loginLeft,
.loginRight {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.loginLogo {
font-size: 50px;
font-weight: 800;
color: #ff0000;
margin-bottom: 10px;
}
.loginDesc {
font-size: 24px;
}
.loginBox{
height: 300px;
padding: 20px;
background-color: white;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.loginInput{
height: 50px;
border-radius: 10px;
border: 1px solid gray;
font-size: 18px;
padding-left: 20px;
}
.loginInput:focus{
outline: none;
}
.loginButton{
height: 50px;
border-radius: 10px;
border: none;
background-color: #ff0000;
color: white;
font-size: 20px;
font-weight: 500;
cursor: pointer;
}
.loginButton:focus{
outline: none;
}
.loginButton:disabled{
cursor: not-allowed;
}
.reCAPTCHA{
position: absolute;
z-index: 999;
bottom: 160px;
right: 495px;
}
.loginForgot{
text-align: center;
color: #ff0000;
}
.loginRegisterButton{
width: 60%;
align-self: center;
height: 50px;
border-radius: 10px;
border: none;
background-color: #ff0000;
color: white;
font-size: 20px;
font-weight: 500;
cursor: pointer;
}
This is what it looks like:
IMG
Related
Actually, I have two questions
The First one is that Why is the following code using styled-components not working, I removed node modules, installed it again globally etc and it's not working. The output render is blank.
Am I using the Pseudo classes correctly in styled components If not please show me
I would really appreciate it if you could show me through the code I have.
I will List my Js file plus the desired CSS below,
I only want the CSS through styled-components
import React, { useRef} from "react";
import ReactDOM from 'react-dom/client';
import Home from "../Dashboard/Home";
import App from '../../App';
import Bye from "./Login"
import styled from "styled-components"
function Register(){
const name=useRef()
const email=useRef()
const password=useRef()
const root = ReactDOM.createRoot(document.getElementById('root'));
const handleClick=()=>{
if(name.current.value&&email.current.value&&password.current.value)
{
localStorage.setItem("name",name.current.value)
localStorage.setItem("email",email.current.value)
localStorage.setItem("password",password.current.value)
localStorage.setItem("signUp",email.current.value)
alert("Account created successfully!!")
root.render(
<React.StrictMode>
<Home/>
</React.StrictMode>
);
}
}
const goHome=()=>{
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
}
const handleSignIn=()=>{
root.render(
<React.StrictMode>
<Bye />
</React.StrictMode>
);
}
const Body = styled.div`
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: black;
`
const Box = styled.div`
position: relative;
width: 600px;
height: 540px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
&:before{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff);
animation: animate 6s linear infinite
}
`
const Title = styled.h2`
align-items: center;
color: #45f3ff;
font-size: 25px;
font-weight: 500;
`
return(
<Body>
<Box>
<div className="form">
<Title>Hello Lets Get you Started</Title>
<div className="inputBox">
<input type="text"required="required" ref={name}/>
<span>Your Full Name: </span>
<i></i>
</div>
<div className="inputBox">
<input type="text"required="required" ref={email}/>
<span>Your Email: </span>
<i></i>
</div>
<div className="inputBox">
<input type="password" required="required" ref={password}/>
<span> Your Password: </span>
<i></i>
</div>
<div class="Links">
<button className="btn-2 btn" onClick={handleSignIn}> Sign In</button>
<button className="btn-3 btn" onClick={goHome}>Return Home</button>
</div>
<button type="submit" className="btn-1" onClick={handleClick}>Sign Up </button>
</div>
</Box>
</Body>
)
}
export default Register;
thats my JS file (not jsx)
below is the desired Css
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700,800,900,&display=swap');
.body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: black;
}
.box{
position: relative;
width: 600px;
height: 540px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
}
.title{
align-items: center;
color: #45f3ff;
font-size: 25px;
font-weight: 500;
}
.box::before{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff);
animation: animate 6s linear infinite
}
.box::after{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
background: linear-gradient(0deg, transparent, #45f3ff, #45f3ff);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
.form{
position: absolute;
inset: 2px;
border-radius: 8px;
background: #28292d;
z-index: 10;
padding: 50px 40px;
display: flex;
flex-direction: column;
}
.inputBox span{
display: flex;
justify-content: space-between;
margin-right: 55px;
margin-top: -60px;
font-size: 18px;
font-weight: 500;
left: 0;
padding: 20px 10px 10px;
pointer-events: none;
letter-spacing: 0.05em;
transition: 0.5s
}
.inputBox{
position: relative;
width: 300px;
margin-top: 35px;
}
.inputBox input{
position: relative;
width: 165%;
padding: 20px 10px 10px;
background: transparent;
border: none;
text-align: left;
font-weight: 500;
outline: none;
color: black;
font-size: 1em;
letter-spacing: 0.05em;
font-size: 20px;
z-index: 10;
}
.btn-1{
margin-top: 30px;
pointer-events: auto;
cursor: pointer;
}
.Links{
margin-top: 25px;
}
.btn-2{
display: flex;
align-items: left;
margin-top: -10px;
font-size: 1.25em;
border: none;
outline: none;
background: none;
padding: 0;
color: #8f8f8f;
cursor: pointer;
}
.Links button:hover
{
color: #45f3ff;
}
.btn-3{
display: flex;
flex-direction: column;
margin-left: 25rem;
margin-top: -20px;
font-size: 1.25em;
cursor: pointer;
border: none;
outline: none;
background: none;
padding: 0;
color: #8f8f8f;
}
.inputBox input:valid ~ span,
.inputBox input:focus ~ span
{
color: #45f3ff;
transform: translateY(-44px);
font-size: 1.25em;
}
.inputBox i{
position: absolute;
left: 0;
bottom: -7px;
width: 170%;
height: 2px;
background: #45f3ff;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid ~ i,
.inputBox input:focus ~ i
{
height: 55px;
width: 170%;
top: 2px;
}
.btn-1{
border: none;
outline: none;
background: #45f3ff;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
.btn-1:active{
opacity: 0.8
}
Edit: There seems to be that the code works now randomly but i didnt even put all my css and its giving me the exact output i want weird?
It is important to define your styled components outside of the main react component, otherwise it will be recreated on every single render pass. Defining a styled component within the react component will prevent caching and drastically slow down rendering speed, and should be avoided.
import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import styled from 'styled-components';
const Body = styled.div`
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
`;
const Box = styled.div`
position: relative;
width: 600px;
height: 540px;
border-radius: 8px;
overflow: hidden;
&:before{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
animation: animate 6s linear infinite
}
`;
const Title = styled.h2`
align-items: center;
font-size: 55px;
font-weight: 600;
color: red;
`;
function App() {
const name = useRef();
const email = useRef();
const password = useRef();
const handleClick = () => {
if (name.current.value && email.current.value && password.current.value) {
localStorage.setItem('name', name.current.value);
localStorage.setItem('email', email.current.value);
localStorage.setItem('password', password.current.value);
localStorage.setItem('signUp', email.current.value);
alert('Account created successfully!!');
}
};
const goHome = () => {};
const handleSignIn = () => {
root.render();
};
return (
<Body>
<Box>
<div className='form'>
<Title>Hello Lets Get you Started</Title>
<div className='inputBox'>
<input type='text' required='required' ref={name} />
<span>Your Full Nameeee: </span>
</div>
<div className='input-box'>
<input type='text' required='required' ref={email} />
<span>Your Email: </span>
<i></i>
</div>
<div className='input-box'>
<input type='password' required='required' ref={password} />
<span> Your Password: </span>
</div>
<div className='Links'>
<button className='btn-2 btn' onClick={handleSignIn}>
{' '}
Sign In
</button>
<button className='btn-3 btn' onClick={goHome}>
Return Home
</button>
</div>
<button type='submit' className='btn-1' onClick={handleClick}>
Sign Up{' '}
</button>
</div>
</Box>
</Body>
);
}
export { App };
Here is my solution. Keep styled component outside of Register component.
import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import Home from '../Dashboard/Home';
import App from '../../App';
import Bye from './Login';
import styled from 'styled-components';
const Body = styled.div`
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: black;
`;
const Box = styled.div`
position: relative;
width: 600px;
height: 540px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
&:before {
content: '';
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
background: linear-gradient(
0deg,
transparent,
transparent,
#45f3ff,
#45f3ff
);
animation: animate 6s linear infinite;
}
`;
const Title = styled.h2`
align-items: center;
color: #45f3ff;
font-size: 25px;
font-weight: 500;
`;
function Register() {
const name = useRef();
const email = useRef();
const password = useRef();
const root = ReactDOM.createRoot(document.getElementById('root'));
const handleClick = () => {
if (name.current.value && email.current.value && password.current.value) {
localStorage.setItem('name', name.current.value);
localStorage.setItem('email', email.current.value);
localStorage.setItem('password', password.current.value);
localStorage.setItem('signUp', email.current.value);
alert('Account created successfully!!');
root.render(
<React.StrictMode>
<Home />
</React.StrictMode>
);
}
};
const goHome = () => {
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
};
const handleSignIn = () => {
root.render(
<React.StrictMode>
<Bye />
</React.StrictMode>
);
};
return (
<Body>
<Box>
<div className="form">
<Title>Hello Lets Get you Started</Title>
<div className="inputBox">
<input type="text" required="required" ref={name} />
<span>Your Full Name: </span>
<i></i>
</div>
<div className="inputBox">
<input type="text" required="required" ref={email} />
<span>Your Email: </span>
<i></i>
</div>
<div className="inputBox">
<input type="password" required="required" ref={password} />
<span> Your Password: </span>
<i></i>
</div>
<div class="Links">
<button className="btn-2 btn" onClick={handleSignIn}>
{' '}
Sign In
</button>
<button className="btn-3 btn" onClick={goHome}>
Return Home
</button>
</div>
<button type="submit" className="btn-1" onClick={handleClick}>
Sign Up{' '}
</button>
</div>
</Box>
</Body>
);
}
export default Register;
Hope this help you.
In my React app I am creating a task tracker and I have a form which is used to add or filter tasks in one component. In another component I am mapping through the tasks the list each task. I'm trying to put my task list on top of the form container.
TaskList.js
function TaskList({ tasks, setTasks, filterTasks }) {
return (
<div className='task-container'>
<ul className='task-list'>
{filterTasks.map((task) => (
<Task
task={task}
tasks={tasks}
setTasks={setTasks}
text={task.text}
id={task.id}
/>
))}
</ul>
</div>
);
}
TaskForm.js
return (
<div className='form-container'>
<form className='task-form'>
<input
value={inputText}
onChange={inputHandler}
type='text'
className='task-input'
/>
<button onClick={submitHandler} className='task-button' type='submit'>
<i className='fas fa-plus-square'></i>
</button>
<div className='select'>
<select onChange={statusHandler} name='tasks' className='filter-task'>
<option value='all'>All</option>
<option value='completed'>Completed</option>
<option value='uncompleted'>Uncompleted</option>
</select>
</div>
</form>
</div>
);
Styles
.form-container {
display: flex;
justify-content: center;
}
.task-form {
background-color: #222831;
width: 450px;
min-height: 300px;
display: flex;
justify-content: center;
margin: 0;
border-radius: 10px;
}
form input,
form button {
padding: 0.5rem;
border: none;
background: white;
margin: 0px 0px 0px 20px;
}
form button {
color: #ff6f47;
background: #f7fffe;
cursor: pointer;
transition: all 0.3s ease;
font-size: 2rem;
}
form button:hover {
background: #ff6f47;
color: white;
}
.task-container {
display: flex;
justify-content: center;
align-items: center;
}
.task-list {
min-width: 30%;
list-style: none;
padding: 0;
}
.task {
margin: 0.5rem;
background: white;
font-size: 1.5rem;
color: black;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 1s ease;
}
.task-button {
margin: 0;
height: 64px;
margin-top: 12px;
}
.filter-task {
padding: 1rem;
}
.task li {
flex: 1;
}
.task-item {
padding: 0rem 0.5rem;
}
.task-input {
padding-left: 10px;
width: 200px;
height: 64px;
margin-top: 12px;
}
When changing the positioning to absolute, everything shifts to the left. I'm not sure how to make .task-container a child element of the .task-form.
I'm not sure if this is what you are looking for but to answer this part
"I'm trying to put my task list on top of the form container."
You should just be able to stack the components in whatever parent component you are rendering them in.
Hope this helps, not sure if it answers what you were asking.
function TaskList({}) {
return (
<div className='task-container'>
task list content
</div>
);
}
function TaskForm({}) {
return (
<div className='form-container'>
task form content
</div>
);
}
class App extends React.Component {
render() {
const {title} = this.props;
return (
<div>
<TaskList/>
<TaskForm/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById("react")
);
.task-container {
display: flex;
justify-content: center;
align-items: center;
}
.form-container {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
I have this part of component:
<div id="container">
<span id="magnify">🔍</span>
<input id="search" />
<span id="user">👤</span>
<span
#click="dialog = true"
id="buttonMenuHamburger">Ⓜ️</span>
</div>
<transition name="fade">
<div
id="menuOverlay"
v-if="dialog"
>
<div
class="fondOverlay"
#click="dialog = false">
</div>
<ul class="contenuMenuOverlay">
<li>
<router-link to="/home">
➕ Home
</router-link>
</li>
</ul>
</div>
</transition>
<script>
import {
ref,
} from 'vue';
import { useRouter } from 'vue-router';
export default {
name: 'SearchBar',
setup() {
const router = useRouter();
const dialog = ref(false);
router.beforeEach((to, from, next) => {
dialog.value = false;
next();
});
return {
dialog,
};
},
};
</script>
<style scoped>
a {
color: black;
}
#menuOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#menuOverlay .fondOverlay {
background-color: rgba(10, 10, 10, 0.5);
height: 100%;
width: 100%;
position: absolute;
z-index: 99;
}
#menuOverlay .contenuMenuOverlay {
padding: 20px;
margin: 20px;
border: 2px solid white;
text-align: left;
font-size: 2em;
font-variant: small-caps;
border: 2px solid white;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.5);
z-index: 100;
}
ul {
list-style-type: none;
font-family: "Champagne & Limousines";
font-variant: small-caps;
}
#container {
margin-bottom: 10px;
}
#container span {
padding-top: 7px;
cursor: pointer;
position: absolute;
}
#magnify {
padding-left: 5px;
min-width: 30px;
}
#user {
margin-left: -60px;
}
#buttonMenuHamburger {
margin-left: -30px;
}
#search {
background: transparent;
text-align: center;
color: white;
font-weight: bold;
font-size: 24px;
padding: 0 80px;
height: 30px;
width: 25%;
border: 2px solid white;
border-radius: 30px;
font-family: 'Caviar Dream';
transition: width 0.2s;
outline: none;
}
#search:focus {
width: 50%;
}
#search:before { content: 'Some'; }
</style>
When I click on the Ⓜ️, the dialog value changes correctly. But if I have the focus on the input, when I click on Ⓜ️ it just loses the focus on the input. I have to click again on the Ⓜ️ to get the dialog value set to true.
Is there something I'm missing?
Thanks in advance.
EDIT: it seems to come from the width change...
I might be misunderstanding your problem but I can't replicate the issue.
const { watchEffect, ref, onMounted, nextTick } = Vue;
Vue.createApp({
setup() {
const dialog = ref(false);
const input = ref(null);
// log when `dialog` is changed
watchEffect(() => console.log(dialog.value));
// focus on `input` from the beginning
onMounted(() => nextTick(() => input.value.focus()));
return { dialog, input };
},
}).mount('#app');
<script src="https://unpkg.com/vue#3.0.7/dist/vue.global.js"></script>
<div id="app">
<span id="magnify">🔍</span>
<input id="search" ref="input" />
<span id="user">👤</span>
<transition name="fade">
<span
#click="dialog = true"
id="buttonMenuHamburger">Ⓜ️</span>
</transition>
</div>
I am trying to get a footer properly but I can't get the result, I expect
here is what I expect to have:
below is what I have:
The copyright text is lost somewhere on the right. You can't see it as background is white.
here is the code:
import React, {} from 'react';
import {Form, InputGroup} from 'react-bootstrap';
import { Navbar } from 'react-bootstrap';
import TextContents from '../assets/translations/TextContents';
import WhiteButton from './materialdesign/WhiteButton';
import SiteLogo from '../assets/images/village-logo.svg';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faFacebook, faTwitter, faLinkedinIn, faInstagram } from '#fortawesome/free-brands-svg-icons'
import './Footer.css';
class Footer extends React.Component {
constructor(props, context) {
super(props);
this.state = {showLogin: false};
}
render() {
return (
<div>
<div className="container">
<Navbar className="navbar" width="100" expand="lg">
<div className="footer-menu">
<div>
<Navbar.Brand href="/">
<img
src= { SiteLogo }
className="logo"
alt="Village"
/>
</Navbar.Brand>
</div>
<div className="subscribe">
<InputGroup className="subscribe-form">
<Form.Control
type="email"
placeholder={TextContents.EmailSubscribe}
className="subscribe-form-control"
/>
</InputGroup>
</div>
<div className="follow-container">
<WhiteButton textSize="14" link_href="#" text={TextContents.Join} />
<p className="follow-text"> {TextContents.Follow} </p>
<FontAwesomeIcon icon={faFacebook} className="follow-icon"/>
<FontAwesomeIcon icon={faTwitter} className="follow-icon"/>
<FontAwesomeIcon icon={faInstagram} className="follow-icon"/>
<FontAwesomeIcon icon={faLinkedinIn} className="follow-icon"/>
</div>
</div>
</Navbar>
</div>
<div>
<p className="copyright-text">{TextContents.Copyright}</p>
</div>
</div>);
}
}
export default Footer;
and the css
.navbar{
background-color: white;
width: 80%;
margin-top: 2%;
margin-bottom: 2%;
font-family: "Fredoka One";
font-size: 18px;
margin: auto;
}
.logo {
width: 214px;
height: 28px;
margin-right: 24;/*theme.spacing(3)*/
}
.container{
display: flex;
box-shadow: none;
background-color: #ffffff;
/*margin-top: 24; /*theme.spacing(3),*/
position: absolute;
bottom: 0;
width: 80%;
height: 2.5rem;
}
.footer-menu {
display: flex;
position: relative;
}
.subscribe {
display: flex;
position: relative;
border-radius: 21px;
background-color: #f4f7f8;
margin-right: 16; /*theme.spacing(2),*/
margin-left: 24; /*theme.spacing(3),*/
width: 467px;
height: 40px;
}
.follow-container {
text-align: center;
align-items: center;
justify-content: center;
margin-left: 16px;/*theme.spacing(2),*/
min-width: 300px;
}
.follow-text {
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #ff7255;
font-family: Source Sans Pro;
min-width: 75px;
margin-left: 20px;
margin-right: 5px;
}
.follow-icon {
width: 18px;
height: 18px;
margin-right: 2px;
margin-left: 2px;
color: #ff7255;
}
.copyright-text {
font-size: 14px;
font-weight: bold;
text-align: center;
color: #ffff7255;
font-family: Source Sans Pro;
}
.subscribe-form {
width: 470px;
height: 40px;
border-radius: 20px;
margin-left: 60px;
}
.subscribe-form-control {
font-family: Source Sans Pro;
text-align: left;
color: #cdcece;
background-color: #f4f7f8;
border-style: none;
}
Any idea How to properly center everything and make sure I have 2 lines.
Thanks
The copyright text is lost somewhere on the right. You can't see it as
background is white
Its because .container has position: absolute
You can put copyright div inside container (and apply necessary changes to make it appear below .navbar) or get rid of position: absolute
Any idea How to properly center everything and make sure I have 2
lines.
As you are using display: flex there are two properties which allow you to align stuff in vertical/horizontal way justify-content, align-items ( they depend on flex-direction though )
Using flexbox add to the container div these bootstrap classes d-flex flex-column justify-content-center align-items-center.
Or manually add these styles to a .container selector
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
I have an input field that has a search icon positioned inside of it using the background property and every time I type in it the cursor sticks in the beginning like shown in the picture:
https://imgur.com/ocJRux8
How can I position the cursor after the search icon? I tried setting the padding-left and the text-indent but that also moves the placeholder which is not desirable.
Here is my input field:
import React, { Component } from "react";
import Spinner from '../../components/Spinner/Spinner.jsx';
import { Link } from 'react-router-dom';
import axios from "axios";
class Search extends Component {
state = {
searchResults: [],
isLoading: false
}
getSearchQuery = (event) => {
const SEARCH_RESULTS_ENDPOINT = process.env.REACT_APP_SEARCH_ENDPOINT;
const queryString = document.querySelector(
".search-input"
).value;
if (event.keyCode === 13) {
this.setState({ ...this.state, isLoading: true });
axios.post(SEARCH_RESULTS_ENDPOINT, {
queryString: queryString,
}).then(response => {
this.setState({ ...this.state, searchResults: response.data });
this.setState({ ...this.state, isLoading: false });
});
}
};
render() {
if (this.state.isLoading) {
return <Spinner />
}
return (
<div>
<input
type="text"
placeholder="Search"
className="search-input"
onKeyDown={(e) => this.getSearchQuery(e)}
/>
<div>
{this.state.searchResults.map(result => (
<div key={result._id} >
<img src={result.picture} alt="avatar" />
<div >
<div>
<h2>{result.title}</h2>
<p>{result.date}</p>
<p>{result.postContent}</p>
<Link to={`/post/${result._id}`} className="read-more-btn">
<button className="read-more-btn">Read more</button>
</Link>
</div>
</div>
</div>
))}
</div>
</div>
);
}
}
export default Search;
and here is my CSS:
.search-input {
background: url(../../assets/images/search-icon.png) no-repeat scroll 12px 12px;
background-size: 20px 20px;
margin: auto;
display: block;
width: 500px;
margin-top: 30px;
height: 40px;
border: solid 1px #AAAAAA;
// text-indent: 30px;
}
.search-icon {
height: 20px;
width: 20px;
}
.no-results-found {
text-align: center;
margin-top: 50px;
}
.search-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
padding-left:35px;
}
input:focus{
outline: none;
}
::-moz-placeholder { /* Firefox 19+ */
padding-left:20px;
}
:-ms-input-placeholder { /* IE 10+ */
padding-left:20px;
}
:-moz-placeholder { /* Firefox 18- */
padding-left:20px;
}
Add some padding to search input as it will pad that much area.
.search-input {
background: url(../../assets/images/search-icon.png) no-repeat scroll 12px 12px;
background-size: 20px 20px;
margin: auto;
display: block;
width: 500px;
margin-top: 30px;
height: 40px;
border: solid 1px #AAAAAA;
padding-left: 20px;
}
Here's how I would do it.
Example with 2 variants
const { useState, useEffect } = React;
const App = () => {
return <div>
<div className="container">
<span className="icon">
<i className="fas fa-search"></i>
</span>
<input className="input" type="Text" placeholder="Search"/>
</div>
<div className="container1">
<span className="icon1">
<i className="fas fa-search"></i>
</span>
<input className="input1" type="Text" placeholder="Search"/>
</div>
</div>
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
.container {
border: 1px solid black;
width: 300px;
}
.input {
padding: .5rem .5rem .5rem 2rem;
border: none;
}
.input:focus {
outline: none;
}
.icon {
position: absolute;
margin-top: .5rem;
margin-left: .5rem;
}
.container1 {
margin-top: 1rem;
border: 1px solid black;
width: 300px;
display: flex;
}
.icon1 {
padding: .5rem 0 .5rem .5rem;
}
.input1 {
flex: 1 1 auto;
padding: .5rem;
border: none;
}
.input1:focus {
outline: none;
}
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"></script>
<div id="root"></div>