JSFiddle - React, Tailwind, and code Playground

by KyleMuir

HTML

<body>

	<div class="category1">
	<h1>Wellness</h1>
	Task:<input type="text" id = "input_text">
	Date:<input type="text" id = "input_date">
	Time:<input type="text" id = "input_time">
	<button onClick='buttonClicked()'>Click Me!</button>
	<ul id="myText"></ul>
	      
	
	      </div>


	      	<div class="priority"> <!---->
		
	<h1>Priority level</h1>
		
		<div class="critical"> <!---->
			
			<h2>Critical</h2>
			<ul>
				</ul>
		</div>

	</div>


    

</body>

CSS

h2{
		text-decoration: underline;
	}
	
	.category1, .critical, .master_list{
		height: 500px;
		width: 200px;
		border:10px;
		padding: 10px;
		margin: 20px;
		border-style: ridge;
	}

	.category1{
		background-color: rgb(200,200,200);	
		border-color: rgb(100,100,100);
		

	}

	.notes{
		background-color: lightblue;
	}

	.critical{
		background-color: rgb(255,100,100);
		border-color: rgb(100,0,0);
		
	}

	.master_list{
		background-color: rgb(225,225,225);
		border-color: rgb(150,150,150);
			
	}

JavaScript

function task(text, date, time) {
    var self = this;
    self.text = text;
    self.date = date;
    self.time = time;
    this.formatString = function() {
        return self.text + ' ' + self.date + ' ' + self.time;
    }
}

function buttonClicked() {
    var myText = document.getElementById('myText');
    var input_text = document.getElementById('input_text').value  ;
    var input_date = document.getElementById('input_date').value  ;
    var input_time = document.getElementById('input_time').value  ;
    var item = new task(input_text, input_date, input_time);
        myText.innerHTML += "<li>"+item.formatString()+"</li>";
}

/*
how do I make this recorded text turn into its own object
*/


/*
input text is goes 
var task = new task(text, date, time)

*/