JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<div class="wrapper">
    <ul>
        <li>
            <span>Did Morning Exercise</span>
            <span class="action yes">Yes</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li>
            <span>Did Sitdown Exercise</span>
            <span class="action yes">Yes</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li>
            <span>Have Tender Coconut</span>
            <span class="action yes">Yes</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li>
            <span>Had Apple</span>
            <span class="action yes">Yes</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li>
            <span>Had Pomegranate</span>
            <span class="action yes">Yes</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li>
            <span>Had Carrot Juice</span>
            <span class="action yes">Yes</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li>
            <span>Had Dates</span>
            <span class="action yes">Yes</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li>
            <span>Had Enough Water</span>
            <span class="action yes">Yes</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li>
            <span>Went 40 mins Walking</span>
            <span class="action yes">Yes</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li>
            <span>Had Dates</span>
            <span class="action yes">Yes</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li class="done">
            <span>Did Evening Exercise</span>
            <span class="action no">No</span>
            <input type="hidden" data-mark="2" />
        </li>
        <li>
            <span>Tablets</span>
            <span class="action yes">Yes</span>
            <input...

CSS

body{
    margin: 0;
}
.wrapper{
    margin: 0 auto;
    max-width: 800px;
}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
ul li{
    position: relative;
    padding: 15px 20px;
    background-color: #EAF9FB;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    color: #004750;
    border-bottom: solid 1px #B4E2E8;
}
ul li .yes,
ul li .no{
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    background-color: #02333A;
    padding: 15px 35px;
    color: #EAF9FB;
    cursor: pointer;
    min-width: 28px;
}
ul li .no{
    background-color: #B4E2E8;
    color: #02333A;
}
ul li:before,
ul li.done:before{
    content: "";
    position: absolute;
    height: 100%;
    width: 5px;
    background-color: #02333A;
    top: 0;
    left: 0;
}
ul li:before{
    background-color: #B4E2E8;
}
.result-wrapper{
        border: solid 5px #B4E2E8;
    background-color: #EAF9FB;
}
.result-wrapper .submit{
    background-color: #02333A;
    border: none;
    box-shadow: none;
    float: right;
    display: block;
    padding: 15px;
    color: #EAF9FB;
    font-size: 15px;
    cursor: pointer;
}
.result-wrapper .result{
    display: block;
    float: right;
    margin: 0 10px 0 0;
    padding: 15px;
    color: #02333A;
    font-size: 15px;
    font-family: "Arial";
}
.result-wrapper:after {
    content: "";
    clear: both;
    display: table;
}

JavaScript

$(".action").click(function(){
	$this = $(this);
    $this.closest('li').toggleClass('done')
    if($this.hasClass('yes'))
        $this.text('No');
    else
        $this.text('Yes');
    $this.toggleClass('yes').toggleClass('no');
});
$(".submit").click(function(){
	$('.result').text($(".no").length+" / "+$(".action").length)
});