JSFiddle - React, Tailwind, and code Playground

by Saloni Sharma

HTML

<!DOCTYPE html>
	<title>Homework2</title>
	<link rel="stylesheet" href="CSS/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
	<script src="JS/main.js"></script>

<body ng-app="MyModule">
    <div ng-controller="MyController as ctrl">	
    <h2>Folders</h2>

    <!-- Checkbox unchecked on page load -->
    <input type="checkbox" ng-model="ctrl.isBoxChecked">Expand All

    <!-- When checkbox is clicked, these elements show -->
    <div ng-show="ctrl.isBoxChecked">
      <ul>
        <li ng-repeat="findFile in ctrl.fileNames">
        <span class="done-" ng-bind="ctrl.fileNames.text">File</span>
        </li>
      </ul>
    </div>

    <!-- Input box captures user input and "add file" button runs function that adds file to <ul> -->
    <form>
      <input type="text" placeholder="enter a file name" ng-model="formSomeFileName">
      <button ng-click="addFileToList()">Add File</button>
    </form>
  

</html>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: 'Century Gothic', sans-serif;
}

ul {
	background-color: lightblue;
}

li {
	padding: 10px;
}

.add-button {
	width: 100px;
	height: 50px;
	border: 2px solid black;
	border-radius: 10px;
	background-color: yellow;
	font-size: 1em;	
}

.enter-input {
	width: 300px;
	height: 50px;
	border: 2px solid black;
	border-radius: 10px;
	padding: 10px;
	font-size: 1.1em;
}

JavaScript

var myMod = angular.module("MyModule", []);
myMod.controller("MyController", function() {
	var self = this;

	// Makes checkbox unchecked upon page load
	self.isBoxChecked = false;
	// self.onUserClick = function() {
  
	// This makes value true for ng-show
	self.isBoxChecked = !self.isBoxChecked;

	// Creates an array of file name objects
	self.fileNames = [
		{text: 'File 1.1', done: false},
		{text: 'File 1.2', done: false},
		{text: 'File 1.3', done: false}
	];

	// Pushes user input into array fileNames (user input becomes ng-model)
	  self.addFileToList = function() {
		self.fileNames.push({text: self.formSomeFileName, done: false});
		self.formSomeFileName = '';
	}
// };

});