LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Hi, My name is

CSS
@charset "UTF-8";
.back {
  height: 100vh;
  width: 100%;
}
.back::after {
  content: "";
  display: block;
  background: #2FB8C1;
  clip-path: polygon(0 100%, 0 0, 100% 0);
  height: 100vh;
}

.profile_section {
  position: absolute;
  width: 800px;
  height: 400px;
  top: calc(50vh - 200px);
  left: calc(50vw - 400px);
  background-color: #fff;
  box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.3);
  border-radius: 0.475rem;
}

.top_section {
  height: 100px;
  background-color: #2FB8C1;
}

img {
  position: relative;
  z-index: 2;
  border-radius: 50%;
}

.img {
  position: relative;
  height: 128px;
  width: 128px;
  border-radius: 50%;
  margin-left: calc(50% - 64px);
  margin-top: -50px;
}

.img::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 1;
  transform: scale(1.1);
  height: 128px;
  width: 128px;
  border-radius: 50%;
}

.content {
  font-family: "Ubuntu", sans-serif;
  color: #777;
  font-size: 18px;
  margin-top: 30px;
  text-align: center;
}

.name {
  font-family: "Ubuntu", sans-serif;
  font-size: 50px;
  margin-top: -18px;
  text-align: center;
}

i {
  height: 20px;
}

.icon {
  font-size: 2rem;
  color: #888;
  letter-spacing: 30px;
  height: 30px;
  cursor: pointer;
  text-align: center;
}
.icon i.active {
  color: #2FB8C1;
}
.icon i:focus {
  color: #2FB8C1;
  outline: none;
}
.icon i:hover {
  color: #2FB8C1;
}

.button {
  border-radius: 4px;
  background-color: #00BBC4;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 20px;
  width: 160px;
  transition: all 0.5s;
  cursor: pointer;
  height: 60px;
  transform: translateY(-230px) translateX(620px);
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: "»";
  position: absolute;
  opacity: 0;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 30px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
JS
let clickedIcon = 0
function fetchUser() {
 fetch('https://randomuser.me/api/')
 .then(res => res.json())
 .then(function(data){
  updateUI(data.results[0])
  clickHandlers(data.results[0])
}) 
}

function updateUI({name,email,dob, location, login, phone, picture}) {
 //=>user
 //user name
 const user_name = name.first;
 const iconType = [name.first, email,dob.split(' ')[0], location.street, phone, login.password]
 document.querySelector('.name').innerText = iconType[clickedIcon];
 //user image
 const imageSrc = picture.large;
 //gmail
 document.querySelector('.s').src = imageSrc
 
 
}
function clickHandlers({email , name , dob , location , phone, login}){
  var s = document.querySelectorAll('.fa')
  s.forEach(elem => {
  elem.addEventListener('click', () => {
    s.forEach(otherElem => {
      otherElem.classList.remove('active')
    })
   //email
   if(elem.classList.contains('email')) {
      document.querySelector('.name').innerText = email
       document.querySelector('.content').innerText = 'My email address is'
     clickedIcon = 1

     }
   //name
   const id = name.first;
   if(elem.classList.contains('user')) {
      document.querySelector('.name').innerText = id
      document.querySelector('.content').innerText = 'Hi, My name is'
    clickedIcon = 0
     }
   //dob
   const space = dob.split(' ')[0];
   if(elem.classList.contains('birthday')) {
      document.querySelector('.name').innerText = space
      document.querySelector('.content').innerText = 'My birthday is'
    clickedIcon = 2
     }
   //address
    const add = location.street;
     if(elem.classList.contains('address')) {
      document.querySelector('.name').innerText = add
      document.querySelector('.content').innerText = 'My address is';
      clickedIcon = 3
     }
   //phone
   if(elem.classList.contains('number')) {
      document.querySelector('.name').innerText = phone
      document.querySelector('.content').innerText = 'My phone number is'
    clickedIcon = 4
     }
   if(elem.classList.contains('password')) {
      document.querySelector('.name').innerText = login.password
      document.querySelector('.content').innerText = 'My password is'
    clickedIcon = 5 
   }
    
      
      
      
    elem.classList.add('active')
  })

 })
}

document.querySelector('.button').addEventListener('click', fetchUser)
fetchUser()
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 22:00

Related Codes

Pen ID
Pen ID
Pen ID