${toUpperCaseAt(this.name, 0)}

`; customSection.appendChild(name); customSection.appendChild(colorsContainer); $(target).appendChild(customSection); } } function chanceColor(e) { const { varName, color, name } = e; setCSSvariable(`--${varName}`, color) if (name == "base theme") { setCSSvariable("--section-bg", color == "#000" ? "#272727" : "#fff") setCSSvariable("--text-color", color == "#000" ? "#fff" : "#000") setCSSvariable("--box-shadow", color == "#000" ? "#000" : "#aaa") } } async function loadUser(id) { $("#loader").style.display = "flex" $("#progress").innerHTML = "0%" user = new User(id) user.on("progress", e => { $("#progress").innerHTML = `${100/e.total*e.loaded|0}%` }) //load only codes & courses const status = await user.load("codes", "courses"); if (status == "USER_NOT_FOUND") { $("#loader").style.display = "none" return alert(`user with id: ${user.id} not found, please try with another id`); }; //data destructuring const { name, upvotes, courses, codes } = user; $("#avatar").innerHTML = user.avatar.outerHTML; $("#userName").innerHTML = name; $("#totalUpvotes").innerHTML = upvotes; $("#courses").innerHTML = Object.entries(courses).length; $("#totalCodes").innerHTML = codes.length; $("#allCodes").innerHTML = noCodes(codes); user.codes.forEach(code => { const codeContainer = createCodeCard(code); $("#allCodes").appendChild(codeContainer); }) $("#top5").innerHTML = noCodes(codes); user.mostVoted(5).forEach(code => { const codeContainer = createCodeCard(code); $("#top5").appendChild(codeContainer); }) $("#suggested").innerHTML = noCodes(codes); user.codes.forEach(code => { const codeContainer = createCodeCard(code); if (Math.random() > 0.7) $("#suggested").appendChild(codeContainer); }) $("#skills").innerHTML = Object.entries(courses).length == 0 ? "No skills" : ""; for (let name in courses) { course = courses[name] const container = document.createElement("div") container.classList.add("skill"); container.style.background = `linear-gradient(90deg,var(--primary-color) ${course.completed}%,#444 ${course.completed}%` container.appendChild(course.icon); container.innerHTML += `

${course.name}

${course.xp}xp

${course.completed | 0}%

` $("#skills").appendChild(container); } $("#loader").style.display = "none"; } function noCodes(codes) { return codes.length === 0 ? "No Codes" : "" } function createCodeCard(code) { const container = document.createElement("div"); container.classList.add("code"); container.dataset.url = code.url; container.addEventListener("click", () => { const confirm = window.confirm(`Do you want open it in a modal box?\n if not, it will automatically open in sololearn app`); if (confirm) { openModal(code.url, code.name) } else { createWindow(code.url); } }) container.innerHTML = `

${code.name}

${code.type}

${code.upvotes}

` return container; } function listenModal() { $("#open-modal").addEventListener("click", () => { openModal(SOLOLEARN + user.id, user.name) }) $("#open-window").addEventListener("click", () => { const newWindow = createWindow(SOLOLEARN + user.id); }) } function openModal(url, name) { let modal = createModal(url, "modal-box"); $("#modal-name").innerHTML = name; $("#modal-box").classList.add("active"); $("#modal-box").appendChild(modal); $("#maximize").classList.add("active"); $("#restore").classList.remove("active") $("#close").addEventListener("click", () => { modal.remove(); $("#modal-box").classList.remove("active"); }) $("#maximize").addEventListener("click", () => { $("#modal-box").classList.add("full-screen"); $("#maximize").classList.remove("active"); $("#restore").classList.add("active") }) $("#restore").addEventListener("click", () => { $("#modal-box").classList.remove("full-screen"); $("#maximize").classList.add("active"); $("#restore").classList.remove("active") }) } const $ = element => document.querySelector(element); function createWindow(url) { const newWindow = window.open(url + "?ref=app"); return newWindow; } function createModal(url, id) { const modal = document.createElement("iframe"); modal.src = url; if (id) modal.classList.add("iframe"); return modal; } class EventEmitter { constructor() { this.events = {}; } on(type, listener) { if (typeof this.events[type] !== 'object') { this.events[type] = []; } this.events[type].push(listener); return () => this.removeListener(type, listener); } removeListener(type, listener) { if (typeof this.events[type] === 'object') { const idx = this.events[type].indexOf(listener); if (idx > -1) { this.events[type].splice(idx, 1); } } } emit(type, ...args) { if (typeof this.events[type] === 'object') { this.events[type].forEach(listener => listener(...args)); } } } function loadImage(url){ return new Promise(resolve=>{ const img= new Image(); img.onload=()=>resolve(img); img.onerror=async ()=>{ const noAvatar=await loadImage("https://www.sololearn.com/Images/NoAvatar.jpg"); resolve(noAvatar) } img.src=url; }) } class User { constructor(id) { this.id = id; this.name = ""; this.xp = 0; this.level = 0; this.avatar = null; this.codes = null; this.certificates = null; this.courses = null; this.badges = null; this.events = new EventEmitter(); } on(type, listener) { this.events.on(type, listener); } static async getHTMLDocument(id, events) { return new Promise(resolve => { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = e => { if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { resolve(xhr.responseText) } else if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 400) { } } xhr.onprogress = e => events.emit("progress", e); let url = "https://www.sololearn.com/Profile/" + id; // use cors-anywhere API to make the request url = 'https://cors-anywhere.herokuapp.com/' + url; xhr.open('GET', url, true); xhr.send(null); }) } async load(...args) { const textHTML = await User.getHTMLDocument(this.id, this.events); let parser = new DOMParser(); const document = this.document = parser.parseFromString(textHTML, "text/html"); if (!document.querySelector(".userProfile")) { return "USER_NOT_FOUND"; } [this.avatar, this.name, this.level, this.xp] = User.getBasicData(document); this.avatar= await loadImage(this.avatar.src); for (let name of args) { this[name] = User[`get${name.charAt(0).toUpperCase()}${name.slice(1, name.length)}`](document); } } static getBasicData(document) { const user = document.querySelector(".user"); const userDetails = user.querySelector(".details") let avatar = user.querySelector(".avatar img"), name = userDetails.querySelector("h1").innerHTML.trim(), level = userDetails.querySelector(".detail div").innerHTML.trim(), xp = user.querySelector("span").innerHTML; //format xp = Number(xp.replace("XP", "").trim()); level = Number(level.substring(20, level.length).trim()); return [avatar, name, level, xp]; } static getBadges(document) { var container = document.querySelector(".userAchievements"), badges = [...container.querySelectorAll(".achievement ")]; badges = badges.map(badge => { const id = badge.id, icon = badge.querySelector(".icon img"), unlocked = badge.classList.value == "achievement disabled" ? false : true, title = badge.title, description = badge.querySelector(".details .description").innerHTML.trim(); return { id, unlocked, //icon, title, description } }) return badges; } static getCourses(document) { if (!document.querySelector(".userCourses")) return []; var container = document.querySelector(".userCourses"), courses = [...container.querySelectorAll(".courseWrapper")]; var ob = {}; for (let i = 0; i < courses.length; i++) { var course = courses[i]; var completeName = course.querySelector("a").title, name = completeName.split(" ")[0].toLowerCase(), icon = course.querySelector("img"), xp = Number(course.querySelector(".courseXp").innerHTML.split(" ")[0]), completed = Number(course.querySelector(".chart").dataset.percent); let iconSrc={ javascript:"1024", "c++":"1051", html:"1014", python:"1073", c:"1089", java:"1068", "c#":"1080", css:"1023", ruby:"1081", php:"1059", sql:"1060", jquery:"1082", react:"1097", angular:"1092", data:"1093", machine:"1094", swift:"1075" } icon.src="https://api.sololearn.com/Uploads/Courses/"+iconSrc[name]+".png"; ob[name] = { name: completeName, icon, xp, completed } } return ob; } static getCodes(document) { let codes = [...document.querySelectorAll(".codeContainer")]; codes = codes.map((info, i) => { let id = Number(info.dataset.id), details = info.querySelector(".code .codeDetails"), name = details.querySelector(".codeName a").innerHTML.trim(), upvotes = Number(details.querySelector(".actions .vote p").innerHTML), type = info.querySelector(".iconContainer a").innerHTML.trim(), date = details.querySelector(".codeName .codeDate span").dataset.date, url = details.querySelector(".codeName a").href; return { type, date, id, name, upvotes, index: i, url } }) return codes; } } function prop(propName, getfn, setfn) { var obj = {}; obj[propName] = { get: getfn, set: setfn }; Object.defineProperties(this, obj); } prop.apply(User.prototype, ["upvotes", function () { if (this._totalUpvotes) return this._totalUpvotes; var value = 0; this.codes.forEach(code => { value += code.upvotes; }) this._totalUpvotes = value; return value; }]); User.prototype.mostVoted = function (count = 1) { if (this._mostVoted) return this._mostVoted; var sorted = null; sorted = this.codes.sort((a, b) => { if (a.upvotes < b.upvotes) return 1; if (a.upvotes > b.upvotes) return -1; return 0; }); this._mostVoted = count <= 1 ? sorted[0] : sorted.slice(0, count); return this._mostVoted; }

Modern Profile Viewer 👥 | UI design