JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<div class="gifts" data-bind="foreach: gifts">
    <div class="gift-item">
<a href="#" class="btn btn-reserve" data-bind="click: $root.openReservation, css: { reserve: isReservating }">Reserve</a>
<div class="simple-reserve reserve-window" data-bind="visible: isReservationOpen()==true && IsPledge==false">
    <h3>Gift reservation: <span data-bind="text: Name"></span></h3>
    <h4>1. Gift is not buyed</h4>
    <p>Aliquam purus ligula, congue non porta ac, consectetur quis turpis.</p>
    <a href="#" data-bind="click: $root.reserve">Reserve</a> <a href="#" data-bind="click: $root.cancelReservation">Cancel</a>
</div>
        
        <div class="pledge-reserve reserve-window" data-bind="visible: isReservationOpen()==true && IsPledge==true">
    <h3>Pledge on gift: <span data-bind="text: Name"></span></h3>
    <p>Aliquam purus ligula, congue non porta ac, consectetur quis turpis.</p>
            <p>Funded: <span data-bind="text: Current"></span>/<span data-bind="text: Value"></span> </p>
            <p data-bind="visible: IsAlmost">Thanks all! We are almost there!</p>
            <input type="text" data-bind="value: PledgeValue, visible: Pledged()==false" />       
            <p data-bind="visible: Pledged()==true">Thanks! You have pledged <span data-bind="text: PledgeValue"></span></p>
            
    <a href="#" data-bind="click: $root.pledge, visible: Pledged()==false">Pledge</a> <a href="#" data-bind="click: $root.cancelReservation">Cancel</a>
</div>
        
</div>
</div>

CSS

*{
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
}
body{
    font-family: Arial;
}
.gift-item{
    margin-left: 10%;
    margin-right: 10%;
}
.gift-item:after{
    content: '';
    clear: both;
    display: block;
}
.btn{
    display: block;
    height: 30px;
    line-height: 30px;
}
.btn-reserve{
    float: right;
}
.btn-reserve.reserve:before{
    content: 'Reserve in progress...';
    display: block;
    float: left;
    margin-right: 10px;
}
.reserve-window{
    position: absolute;
    right: 0;
    margin-top: 30px;
    margin-right: 10%;
    background: white;
}

JavaScript

function MyViewModel() {
    var self = this;

    self.gifts = ko.observableArray();

    self.gifts.push({
        Name: "Sony TV",
        Value: 0,
        Current: ko.observable(0),
        IsPledge: false,
        isReservationOpen: ko.observable(false),
        isReservating: ko.observable(false),
        PledgeValue: ko.observable(0),
        Pledged: ko.observable(false),
        IsAlmost: ko.observable(false)
    });
    self.gifts.push({
        Name: "iMac 27",
        Value: 39900,
        Current: ko.observable(5000),
        IsPledge: true,
        isReservationOpen: ko.observable(false),
        isReservating: ko.observable(false),
        PledgeValue: ko.observable(0),
        Pledged: ko.observable(false),
        IsAlmost: ko.observable(true)
    });


    self.openReservation = function(item) {
        item.isReservationOpen(true);
    }
    self.cancelReservation = function(item) {
        item.isReservationOpen(false);
    }

    self.reserve = function(item) {
        item.isReservationOpen(false);
        item.isReservating(true);
    }
    self.pledge = function(item) {
        if (parseInt(item.PledgeValue()) > 0) {
            item.isReservating(true);
            item.Current(parseInt(item.Current()) + parseInt(item.PledgeValue()));
            item.Pledged(true);

        }
    }
}

ko.applyBindings(new MyViewModel());