Skip to content

Commit

Permalink
Css Enhancement...
Browse files Browse the repository at this point in the history
  • Loading branch information
PremApk committed Jul 6, 2021
1 parent 71baf4c commit f6365f3
Show file tree
Hide file tree
Showing 9 changed files with 25 additions and 20 deletions.
3 changes: 1 addition & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"uuid": "^8.3.2",
"web-vitals": "^1.1.2"
},
"scripts": {
Expand Down
8 changes: 6 additions & 2 deletions src/components/App/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,35 @@ import ResultContainer from '../ResultContainer/ResultContainer';
import SearchBox from '../SearchBox/SearchBox';
import './App.css';

//Adding up Git-hub Startup-Name Generator
const name = require('@rstacruz/startup-name-generator');

class App extends React.Component {

//State
state = {
headerTitle: "Name-It!",
isChanged: true,
suggestedNames: []
};

//CallBack function triggered from SearchBox Component
handleInputChange = (InputChangeValue) => {
this.setState({
isChanged: !InputChangeValue,
suggestedNames: InputChangeValue ? name(InputChangeValue) : []
});
};

//Rendering Components
render() {
return (
<div>
<Header isChanged={this.state.isChanged} headTitle={this.state.headerTitle} />
<Header isChanged={this.state.isChanged} headTitle={this.state.headerTitle} />
<SearchBox onInputChange={this.handleInputChange} />
<ResultContainer suggestedNames={this.state.suggestedNames} />
</div>
)
);
}
}

Expand Down
10 changes: 5 additions & 5 deletions src/components/Header/Header.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
margin-top: 60px;
}

.head-image {
Expand All @@ -11,8 +11,8 @@
}

.head-image-expanded {
min-width: 230px;
max-width: 250px;
min-width: 250px;
max-width: 230px;
}

.head-image-contracted {
Expand All @@ -23,11 +23,11 @@
.head-text {
font-family: 'Hachi Maru Pop', cursive;
margin: 5px 0px 15px 0px;
transition: font-size 1s;
transition: font-size 1s, font-size 1s;
}

.head-text-expanded {
font-size: 50px;
font-size: 36px;
}

.head-text-contracted {
Expand Down
4 changes: 3 additions & 1 deletion src/components/NameCard/NameCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ const nameCheapURL = 'https://www.namecheap.com/domains/registration/results/?do

const NameCard = ({ suggestedName }) => {
return (
<a className="card-link" href={`${nameCheapURL}${suggestedName}`}>
<a target="_blank"
rel="noreferrer"
className="card-link" href={`${nameCheapURL}${suggestedName}`}>
<div className="name-card-container">
<p className="name-card">{suggestedName}</p>
</div>
Expand Down
4 changes: 1 addition & 3 deletions src/components/ResultContainer/ResultContainer.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,5 @@
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 40px 100px;
font-size: larger;

padding: 20px 40px;
}
4 changes: 3 additions & 1 deletion src/components/ResultContainer/ResultContainer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import React from 'react';
import NameCard from '../NameCard/NameCard';
import './ResultContainer.css';

const { v4: uuidv4 } = require('uuid');

const resultContainer = ({ suggestedNames }) => {

const suggestedNamesJSX = suggestedNames.map((suggestedName) => {
return <NameCard key={suggestedName} suggestedName={suggestedName} />
return <NameCard key={uuidv4()} suggestedName={suggestedName} />
});

return (
Expand Down
9 changes: 4 additions & 5 deletions src/components/SearchBox/SearchBox.css
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.search-container {
display: flex;
justify-content: center;
margin: 10px 30px 0px 30px;
margin: 10px;
}

.search-input {
padding: 15px 80px;
font-size: x-large;
width: 400px;
padding: 8px 15px;

width: 250px;
border-width: 0;
background: #a592f2;
color: #e7e9f0;
Expand All @@ -17,7 +17,6 @@

.search-input::placeholder {
color: #e7e9f0;
font-size: x-large;
}

.search-input:focus {
Expand Down
2 changes: 1 addition & 1 deletion src/components/SearchBox/SearchBox.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const searchBox = ({ onInputChange }) => {
<input
onChange={(event) => onInputChange(event.target.value)}
className="search-input"
placeholder="Search your Keywords here!" />
placeholder="Type Keywords Here" />
</div>
);
};
Expand Down

0 comments on commit f6365f3

Please sign in to comment.