React Js Profile Card With Full Source Code

Author - personCodeatnow

Follow Us On Telegram   Telegram link

Crafted a dynamic profile card using React.js, featuring sleek design and interactive components. Available with free access to the complete source code, enabling easy customization for personal or professional use.

HTML 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow | React Profile Card</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Hind+Guntur:300,400,500,600,700&amp;display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="root"></div>
<a target="_blank" title="instagram/web__addict" href="https://www.instagram.com/codeatnow/"><i class="fab fa-instagram"></i></a>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-router/5.0.1/react-router.min.js'></script><script  src="./script.js"></script>

</body>
</html>
CSS 
body{
  font-family: 'Hind Guntur', sans-serif;
  color: #054231;
  display: flex;
  justify-content: center;
  background: #11131e;
}

.card{
  width: 310px;
  height: 627px;
  padding: 15px;
  margin-top: 40px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  box-shadow: 15px 10px 25px 0px  #000000;
  background: #fff;
  background-image: url('https://github.com/OlgaKoplik/CodePen/blob/master/leaf2.png?raw=true'), url('https://github.com/OlgaKoplik/CodePen/blob/master/leaf.png?raw=true');
  background-repeat: no-repeat, no-repeat;
  background-position: 120% -5%, 200% -40%;
  background-size: 40%, 80%;
  -webkit-animation: open .5s;
          animation: open .5s;
}
@-webkit-keyframes open {
  0%  {background-position: 166% -25%, 220% -69%;}
  100%{background-position: 120% -5%, 200% -40%;}
}
@keyframes open {
  0%  {background-position: 166% -25%, 220% -69%;}
  100%{background-position: 120% -5%, 200% -40%;}
}
form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.field{
  margin: 5px;
  display: flex;
  flex-direction: column;
  }
input[type="file"] {
  display: none;
}

.custom-file-upload {
  border-radius: 50%;
  display: inline-block;
  position: relative;
  padding: 6px;
  cursor: pointer;
  background: linear-gradient(270deg, #000000, #11131e);
  margin-bottom: 25px;
}

.img-wrap{
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}
.img-upload:before{
  content: "\f093";
  font-size: 90px;
  position: absolute;
  padding-top: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #11131e;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  opacity: 0;
  transition: .5s ease;
  background-color: #fff;
}
.img-upload:hover:before{
 opacity: 1;
}
img {
  width: auto;
  height: 100%;
}

label{
  text-transform: uppercase;
  font-weight: 700;
  color: #676767;
}

input{
  border-radius: 15px;
  border: 1px solid #b7b7b7;
  padding: 5px 5px 5px 10px;
  font-size: 18px;
  transition: 0.2s;
}
input:focus{
  outline: none;
  border: 1px solid #11131e;
}
input::-moz-placeholder{
  color: #bebebe;
}
input:-ms-input-placeholder{
  color: #bebebe;
}
input::placeholder{
  color: #bebebe;
}
.name{ 
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  color: #676767;
  max-width: 220px;
  overflow-wrap: break-word;
}
.status{
  text-align: center;
  max-width: 220px;
  overflow-wrap: break-word;
}
button{
  position: relative;
  color: #054231;
  letter-spacing: 1px;
  margin: 20px;
  font-size: 18px;
  padding: 10px;
  text-align: center;
  transition: 0.5s;
  border-radius: 10px;
  cursor: pointer;
  border-radius: 25px;
  border: none;
  background: #64d488;
}
.save{
  font-weight: 600;
  left: -20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 20px;
  box-shadow: 20px 0px 40px 0px  #63d3a6;
}
.edit{
  color: #fff;
  width: 180px;
}
button:hover{
  left: 0;
  color: #fff;
  width: 180px;
  box-shadow: 0px 0px 20px 0px  #63d3a6;
}
button:focus{
  outline: none;
}
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  -webkit-animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
          animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}


.fa-instagram{
  position: absolute;
  color: #fff;
  top: 3%;
  right: 2%;
  font-size: 38px;
}
.fa-instagram:hover{
  /* font-size: 42px; */
  color: #79f1a4;
  transition: all .1s linear;
  cursor: pointer;
}
JS 
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const ImgUpload = ({
  onChange,
  src }) => /*#__PURE__*/

React.createElement("label", { htmlFor: "photo-upload", className: "custom-file-upload fas" }, /*#__PURE__*/
React.createElement("div", { className: "img-wrap img-upload" }, /*#__PURE__*/
React.createElement("img", { for: "photo-upload", src: src })), /*#__PURE__*/

React.createElement("input", { id: "photo-upload", type: "file", onChange: onChange }));



const Name = ({
  onChange,
  value }) => /*#__PURE__*/

React.createElement("div", { className: "field" }, /*#__PURE__*/
React.createElement("label", { htmlFor: "name" }, "name:"), /*#__PURE__*/


React.createElement("input", {
  id: "name",
  type: "text",
  onChange: onChange,
  maxlength: "25",
  value: value,
  placeholder: "Alexa",
  required: true }));



const Status = ({
  onChange,
  value }) => /*#__PURE__*/

React.createElement("div", { className: "field" }, /*#__PURE__*/
React.createElement("label", { htmlFor: "status" }, "status:"), /*#__PURE__*/


React.createElement("input", {
  id: "status",
  type: "text",
  onChange: onChange,
  maxLength: "35",
  value: value,
  placeholder: "It's a nice day!",
  required: true }));



const Profile = ({
  onSubmit,
  src,
  name,
  status }) => /*#__PURE__*/

React.createElement("div", { className: "card" }, /*#__PURE__*/
React.createElement("form", { onSubmit: onSubmit }, /*#__PURE__*/
React.createElement("h1", null, "Profile Card"), /*#__PURE__*/
React.createElement("label", { className: "custom-file-upload fas" }, /*#__PURE__*/
React.createElement("div", { className: "img-wrap" }, /*#__PURE__*/
React.createElement("img", { for: "photo-upload", src: src }))), /*#__PURE__*/


React.createElement("div", { className: "name" }, name), /*#__PURE__*/
React.createElement("div", { className: "status" }, status), /*#__PURE__*/
React.createElement("button", { type: "submit", className: "edit" }, "Edit Profile ")));




const Edit = ({
  onSubmit,
  children }) => /*#__PURE__*/

React.createElement("div", { className: "card" }, /*#__PURE__*/
React.createElement("form", { onSubmit: onSubmit }, /*#__PURE__*/
React.createElement("h1", null, "Profile Card"),
children, /*#__PURE__*/
React.createElement("button", { type: "submit", className: "save" }, "Save ")));



class CardProfile extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    {
      file: '',
      imagePreviewUrl: 'https://github.com/OlgaKoplik/CodePen/blob/master/profile.jpg?raw=true',
      name: '',
      status: '',
      active: 'edit' });_defineProperty(this, "photoUpload",


    e => {
      e.preventDefault();
      const reader = new FileReader();
      const file = e.target.files[0];
      reader.onloadend = () => {
        this.setState({
          file: file,
          imagePreviewUrl: reader.result });

      };
      reader.readAsDataURL(file);
    });_defineProperty(this, "editName",
    e => {
      const name = e.target.value;
      this.setState({
        name });

    });_defineProperty(this, "editStatus",

    e => {
      const status = e.target.value;
      this.setState({
        status });

    });_defineProperty(this, "handleSubmit",

    e => {
      e.preventDefault();
      let activeP = this.state.active === 'edit' ? 'profile' : 'edit';
      this.setState({
        active: activeP });

    });}

  render() {
    const { imagePreviewUrl,
      name,
      status,
      active } = this.state;
    return /*#__PURE__*/(
      React.createElement("div", null,
      active === 'edit' ? /*#__PURE__*/
      React.createElement(Edit, { onSubmit: this.handleSubmit }, /*#__PURE__*/
      React.createElement(ImgUpload, { onChange: this.photoUpload, src: imagePreviewUrl }), /*#__PURE__*/
      React.createElement(Name, { onChange: this.editName, value: name }), /*#__PURE__*/
      React.createElement(Status, { onChange: this.editStatus, value: status })) : /*#__PURE__*/


      React.createElement(Profile, {
        onSubmit: this.handleSubmit,
        src: imagePreviewUrl,
        name: name,
        status: status })));



  }}


ReactDOM.render( /*#__PURE__*/
React.createElement(CardProfile, null),
document.getElementById('root'));
Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link