my-blog-app-JavaScript/addReviews.html at master · ruhichandra14/my-blog-app-JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Reviews</title>
	<link rel="stylesheet" href="">
	<style>


    	div{
    		position: relative;
    		width: 500px;
			min-height: 300px;
			border: 1px solid lightpink;
			margin: 2px 2px;
        }


	    h3{
	    	color: white;
	    	font-family: Comic Sans MS;
	    	font-size: 25px;
	    	text-align: center;
	    }

	    div button {
		    position: absolute;
		    right: 0;
		    top: 0px;

		}

		button{
			padding: 6px;
		}

	    textarea{
	    	display: block;
	    	margin:40px auto 0;
	    	width: 320px;
	    }

	</style>
</head>
<body>

	<button id="add-button">Add a Review</button>

<script>

	var addNew = document.getElementById('add-button');
	var deleted = document.getElementById('delete-button');
	var len = Math.random();

	addNew.addEventListener('click', function() {
	    var post = document.createElement("div");
	    var textnode = '<h3>Write Your Reviews<textarea></textarea></h3>';

        post.innerHTML = textnode;
	    document.body.appendChild(post);

        for(i=0;i<len;i++){
        	var count = i;
		    var close = document.createElement('button');
		    post.appendChild(close);
		    close.innerText = 'X';
		    close.id = 'close' + count;
		    post.id = 'post' + count;
		    close.addEventListener('click', function(){
		    	post.remove();
		    })
        }
      colored(post);

	})

	function colored(post){
	    function getColor() {
			var divColor = '#';
		    var symbols = '0123456789ABCDEF'.split('');
		    for (var i = 0; i < 6; i++ ) {
		        divColor += symbols[Math.round(Math.random() * 15)];
		    }
		    return divColor;
	    }
		post.style.backgroundColor = getColor();
	}

</script>
</body>
</html>