elads computer online-store

elads-computer-online-store.markdown

elads computer online-store

A Pen by elad on CodePen.

License.

index.pug

head

link(href='https://fonts.googleapis.com/css?family=Rock Salt' rel='stylesheet')
link(href='https://fonts.googleapis.com/css?family=Sofadi One' rel='stylesheet')
link(href='https://fonts.googleapis.com/css?family=Limelight' rel='stylesheet')

title kurapica
//link( rel="stylesheet" href="/style.css")

div(class="mainBar")
 span(id="user" class="glyphicon glyphicon-user" aria-hidden="true")
 span(id="cart" class="glyphicon glyphicon-shopping-cart")
    span(id="cartProdNum") 
 
center
  body
      h1 welcome 
        span(style="font:100px/40px Limelight;color:#80bfff;") to  
        |kurapica

      h2(style="color:#1a75ff;box-shadow:1px 1px 2px black;width:50vw;") the 
        span(style="color:#e60000;") best 
        span(style="color:#ffff33;") online 
        span(style="color:#5cd65c;") store
      h3(style="color:#333333;") in kurapica, all payment are safe with 
          span(style="text-decoration:underline;") ssh encryption! 
      h3(style="color:#333333;") safe buying 
      div(id="mncontainer")


         
           

script.babel

const mainObj = {
  //tamplates
  mainPage:function(){
    return (
             <span>
              <h1 style={{"color":"#4da6ff"}}>hello and welcome!</h1>
              <p style={{"fontSize":2+"em"}}>in kurapica computers is all we do!. <br/>
               our <em><b>convention</b></em> is to give you the best high quality costumer service, and a safe buying. <br/>
               we offer the best prices Without compromising quality.<br/> 
               keeping your data safe is in our first priority</p>
              </span>
      )
  },
  productsEmmiter: (obj)=>{ 
               var  toexport =[]
               for(var i in obj){
                toexport.push([i,obj[i]])  
                }
                toexport.pop()
                return  toexport
            },
  //mainMenuBar categorys
    categorys:["processors","hard-drives","memorys","video-cards","motherboards","mouse"] ,
  //cart object
    productsInCart:[],
  //render the number of products in the cart!
    renderCartItems:function(){
      var len = this.productsInCart.length
       this.cartClickEvent()
      $("#cartProdNum").text(len).css("color","#b30000")
    },
  //select the cart from the dom 
    cartClickEvent:function(){
      $("#cart").on("click",function(){
        alert("work")
      })
    }
  
  }
 


var Mainbar = React.createClass({
  clicked:function(event){
    var content = event.target.innerHTML
    if(mainObj.categorys[1] === content ){content = "hd"}
    if(mainObj.categorys[3] === content){content = "videocards"} 
    this.setState({next:this.state.product[content]})
    
  },
  getInitialState:function(){
    return ({
             next:["init"]  
             })
  },
  componentDidMount:function(){  
      this.apiCall()
  },
  apiCall:function(){  
     const api = $.getJSON("https://market-app.glitch.me/api/mainPage",(err,data)=>{
      if(err){
        this.setState({product: err.products})     
      }else{
        this.setState({product: data.products})      
      }
      })   
    },
  topBar:function(){
    return ( 
     <center>    
            <ul id="topBar-ul">
             {mainObj.categorys.map((cat)=>{
                return <li id="category" onClick={this.clicked}>{cat}</li>
               })}
                 </ul> 
             </center> 
      )
  },
  sideBar:function(){
    return (
    <div className="sidebar">
          <p className="sidebarHeader"> menu</p>
          <span className="bars-text-span">
            <ul>
              {mainObj.categorys.map((a)=>{
                return <li className="sidebar-ctgrys"> example </li>
              })}
             </ul>
            </span>
       
          </div>
    )   
  },
  render:function(){   
    return (
         <div style={{"position":"center"}}>
        {this.topBar()} 
         {this.sideBar} 
             <ProductsBoxs clickedCategory={this.state.next}  />
        </div>
    )
  }
})

//this class is responsible for taking a selected product name as prop
//and then activate a function called  templates.products([object here])
// that return obj.property.propertys 
//it also return the tooltip as span 
var ProductsBoxs = React.createClass({
  addToCart:(product)=>{
    var askToAdd = confirm(`add to cart ${product.name} ?`)
    if(askToAdd){
       mainObj.productsInCart.push(product)
       mainObj.renderCartItems()
    }  

  },
  render:function(){
  
    return (
  
      <ul id="products-container">
        {this.props.clickedCategory.map((a,i)=>{ 
          var propeties = mainObj.productsEmmiter(a)
          
          if(a =="init"){
            return mainObj.mainPage()
          }else{
            return (
             <li className="box" id={a.id} >
                <img src={a.img} />
                <h4 style={{"padding":"2px"},{"cursor":"pointer"}} title="add to cart">
                  {a.name} 
                  <span onClick={this.addToCart.bind(this,a)}  className="glyphicon glyphicon-shopping-cart boxsCartIcon"></span>
                  
                </h4>
                <span id="tooltip">            
              {
                propeties.map((x)=>{
                  return <p id="properties"> 
                            <b> {x[0]}</b>:{x[1]}
                           </p> 
                })}     
                  </span>
                </li>
          )}
        })}
        </ul>
          
      )
  }
})
ReactDOM.render(<Mainbar  />,document.getElementById("mncontainer"))
//render(<h1>Hello from React</h1>, document.getElementById('application'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

$brdrRds:7;
$boxSize:150;

@mixin topmenu($font) {
  position:relative;
  font: $font;
  color:#80bfff;
  padding:5px;
  border-radius:5px;
  display:inline;
  &:hover {
    border:1px solid orange;
    cursor:pointer;
    color:#b3d2ff;
    text-shadow:1px 1px 3px #0047b3;
    bottom:2px;
  }
  &:active {
    top:2px;
  }
}
html{
  background:snow;
}
body {
 position:relative;
 background:#e1e1ea;
 text-align:center;
 width:60vw;
 padding:40px;
 margin:auto;
 height:150vh;
}
.mainBar {
  position:fixed;
  width:100%;
  height:50px;
  background:#333333;
  top:0;
  left:0;
  margin-bottom:5px;
  text-align:left;
  padding:10px;
  overflow:hidden;
  z-index:20;
}
.glyphicon {
  font-size:30px;
  color: silver;
  margin-left:10px;
  &:hover {
    text-shadow:5px 0px 1px grey;
    cursor:pointer; 
  &#cart{
    text-shadow:0px 0px 7px yellow;
    color:rgba(255, 255, 230,100%);
    }
  }
}
.boxsCartIcon {
  position:absolute;
  top:78%;
  left:0;
  color: #f2f2f2;
  padding:1px;
  z-index:1;
}
h1 {
  color:#ff8c1a;
  font:55px/60px Rock Salt;
  text-shadow:1px 0px 5px black;
  font-weight:bold;
  margin-top:60px;
}

h2 , h3 , h4 {
  color:#4da6ff;
  font-family:sofadi one;
  font-weight:bold;
  text-shadow:0px 0px 3px silver;
}
ul, li {
  list-style:none;
}

#topBar-ul {
  position:relative;
  background:#333333;
  padding:0.2em;
  width:80vw;
  text-align:center;  
  border-radius:5px;
}
@media screen and (max-width:600px){
  #category {
    @include topmenu(19px/35px Limelight);
    display:block;
    margin:2px;
    text-align:center;
    background:#333333;
    padding:0.1em;
    border:0.01em solid silver;
  }
  #topBar-ul {
    width:100%;
  }
  body {
    width:85vw;
    height:100%;
    background:none;
  }
 html{
   background:#e1e1ea;
    }
 .box {
    height:$boxSize +20 +px;
    width:$boxSize - 40 +px;
  }
}
@media screen and (min-width:600px){
   #category {
    @include topmenu(15px/40px Limelight);
    margin:2px;  
  }
   #topBar-ul {
    width:98%;
  }
  body {
    width:85vw;
  }
  .box {
    width:$boxSize+px;
    height:$boxSize+px;
  }
}
@media screen and (min-width:801px){
  #category{    
   @include topmenu(25px/40px Limelight);
  }
   #topBar-ul {
    width:95%;
  }
  body {
    width:60vw;
  }
}
#products-container {
  position:relative;
  width:100%;
  border-radius:7px;
  padding:20px;
  
}
.box {
  position:relative;
  box-shadow:1px 1px 2px black;
  margin:5px;
  float:left; 
  background:snow;
  &:hover #tooltip {
    visibility:visible;
  } 
}
img {
  size:50%;
  width:100px;
  height:90px;
  margin:1px;
}
#tooltip {
  visibility:hidden;
  text-align:left;
  padding:12px;
  position:absolute;
  background:#262626;
  border-radius:7px;
  z-index:10;
  top:-100%;
  opacity:0.9; 
  padding:1em;
}
p {
  font-family:"Comic Sans MS", cursive, sans-serif;
 
}
#properties {
  font-size:1.2em;
  color:#ff4d4d;
}

/*$barsWidth: 1.2em;
%sidebars{
  position:fixed;
  width:$barsWidth;
  border-radius:5px;
  transition: .3s ease;
  visibility:hidden;
  height:100%;
  top:0;
  right:0;
   &:hover {
    width:95%; 
   .bars-text-span{
     visibility:visible;
     } 
  }
}*/
/*.sidebar {
  position:absolute;
  width:$barsWidth*2;
  height:60vh;
  background:#333333;
  right:-15px;
  z-index:1;
  border-radius:5px;
  &:hover {
    width:$barsWidth*15;
    transition: .3s ease;
    .bars-text-span{
     visibility:visible;
     
     } 
    %sidebars{
      visibility:visible;
    }
    
  }
}
*/
/*.sidebar-ctgrys {
  position:relative;
  width:80%;
  background:#f2f2f2;
  margin:2px;
  border-radius:$brdrRds;
  &:hover {
    width:78%;
    right:15px;
    cursor:pointer;
    color:#0066cc;
    font-weight:bold;
    transition: 0.5s  ease;
  }
}*/

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Drop