Rapid Prototyping: Vote On Material - Vanilla JS App 1

index.html

Before:
<div>
	<li>Machine Learning <span>Number of votes: 3</span></li>
	<li>Javascript Prototype Chains <span>Number of votes: 4</span></li>
	<li>A Simple Design Process <span>Number of votes: 5</span></li>
</div>

Some Buttons:
<div>
	<button id="ml">Upvote ML Course</button>
	<button id="js">Upvote JS Course</button>
	<button id="design">Upvote Design Course</button>
</div>
After:
<div>
<div class = "courses" id ="courses">
</div>
</div>

Rapid Prototyping: Vote On Material - Vanilla JS App 1.markdown

Rapid Prototyping: Vote On Material - Vanilla JS App 1

A Pen by Stephen Huh on CodePen.

License.

script.js

var myApp = {};
//functionality designated: addition of li elements with pure DOM manip, ability to upvote and downvote on selected elements - then reorder. upon loading the page, the page should already have all the elements ordered and upon each vote it should automatically reorder LI elements
//Goal Time: 10 hours
//Time logged: 4 hours
//to-do: make these private
var ml = {
	title : "Machine Learning",
	votes : 100
}
var chains = {
	title : "Javascript Prototype Chains",	
	votes: 4
}

var design = {
	title: "A Simple Design Process",
	votes: 5
}

var courses = [];
courses.push(ml, chains, design);

var addCourseToDom = function addCourseToDom(course){
	var li = document.createElement("li");
	li.setAttribute("class", "dynamicUI");
	var text = document.createTextNode(course.title + " Number of Votes : " + course.votes);
	li.appendChild(text);
	var placeToAdd = document.getElementById("courses");
	placeToAdd.appendChild(li);
	return "added " + li;
}

//given an array, doesnt mutate so its more iterative with side effects.
//preferred to use forEach here - due to its side effects
var addCoursesToDom = (courses, cb) => courses.forEach(cb);

	
//onload mock:
addCoursesToDom(courses, addCourseToDom);

//Upvote Buttons and event handlers
var prepareUpvote = function prepareUpvote (){
	var button = document.getElementById(ml);
	console.log()
}

var Upvote = function Upvote(id){
	var button = document.getElementById(id);
	button.addEventListener("click", () => {ml.votes++; changeVoteView();});
}
/*
var changeVoteView = function changeVoteView(){
	//shitty way to rerender all of the courses
	sortCourses();
	addCoursesToDom(courses, addCourseToDom);
}
*/

var clearCourseList = function clearCourseList(){
	var li = document.getElementsByClassName("dynamicUI");
	for (var i = 0; i < li.length; i++){
		li[i].remove();
	}
}
Upvote("ml"); //upvoting event handler done

myApp.courses = (function(){
	var courses = [];
	//attempts to be a pure function with slice
	var sortCourses = function sortCourses(courses){
		var newCourses = courses.slice();
		newCourses.sort((a,b) => b.votes - a.votes);
		return newCourses;
	};
	
	var publicAPI = {};
	publicAPI.sortCourses = sortCourses;
	publicAPI.getCourses = function(){
		return courses;
	};
	publicAPI.addCourses = function addCourses(course){
		courses.push(course);
		return courses;
	};
	return publicAPI;
})();

style.scss

button {
	display: block;	
	margin: 10px 5px;  //TOP/BOT, Left&Right
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />