buttons

Edible buttons

by Pranab Dey

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>homepage</title>
</head>
<body>
  <header class="header">
    <p class="logo">Logo</p>
  </header>
  <main class="main-content">
    <h1 class="title">This is the title of main content area.</h1>
    <p class="desc">This is the description.</p>
    <button class='btn'>Button</button>
  </main>
  <footer class="footer">
    <p class="txt">This is the footer part</p>
  </footer>
</body>
</html>

JavaScript

let edible = function(s,o) {
  if(s!==undefined) {
   let selector = document.querySelector(s);
    if(o!==undefined) {
      let obj = Object.keys(o);
      obj.forEach(d=>{
      	console.log(d, obj[d]);
      	selector.style[d]=o[d]
      })
    }
    else {
      console.log('Property missing. Provide a css property.');
    }
  }
  else {
    console.log('Selector is missing. Provide a selector.');
  }
}

edible('body', {
	margin: '0'
})

edible('.header', {
	background: 'lightgrey',
  borderBottom: '5px solid blue',
  padding: '10px 15px',
  textAlign: 'center'
})

edible('.header .logo', {
	color: 'blue',
  fontSize: '35px',
  textTransform: 'uppercase',
  fontFamily: 'sans-serif'
})

edible('.main-content', {
	padding: '20px',
  textAlign: 'center'
})

edible('.btn', {
  color: 'white',
  background: 'green',
  padding: '10px 25px',
  border: '1px solid green',
  borderRadius: '8px',
  cursor: 'pointer',
  fontSize: '20px'
})