JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<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 type="hidden" data-mark="2" />
    </li>
    <li>
        <span>Spinach</span>
        <span class="action yes">Yes</span>
        <input type="hidden" data-mark="2" />
    </li>
    <li>
        <span>Mulai kettu payir</span>
        <span class="action...

CSS

body{
    margin: 0;
}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;
}

JavaScript

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