I'm trying to draw a circle and put text in the circle. It'll be part of a UI I'm working on. I have it working and it looks the way I want, but I think there must be a better way to do it. Mainly, I don't like all the hard coded numbers and lining up everything by hand. What I'd love is a version that could easily scale to any size without having to change a lot of the `top` and `left` properties of all the text. Any ideas on how to improve this? Fiddle `div.arcs { border: 50px solid red; display: inline-block; min-width: 14em; min-height: 14em; max-height: 14em; max-width: 14em; border-radius: 50%; border-top-color: rgb(109, 176, 65); border-bottom-color: rgb(167, 167, 167); border-left-color: rgb(255, 199, 45); border-right-color: rgb(104, 162, 219); box-shadow: 0 0 20px 5px #a0a0a0; } div.arcs > div { font-family: Calibri; font-size: 20pt; text-align: center; text-shadow: 1px 1px 3px #000000; color: #e0e0e0; position: relative; width: 8.45em; height: 1.5em; line-height: 1.35em; } div.arcs > div:hover { text-decoration: underline; cursor: pointer; } div.arcs > div.top { top: -1.55em; } div.arcs > div.left { transform: rotate(270deg); transform-origin: right top 0; left: -10em; top: -1.5em; } div.arcs > div.right { transform: rotate(90deg); transform-origin: left top 0; left: 10em; top: -3.1em; } div.arcs > div.bottom { top: 3.7em }` ` Text 1 Text 4 Text 2 Text 3 `

I have a select box that in default state looks as default (white, etc) but when I select a different value, I want the entire table row to highlight in yellow. I did this, but I want to make it better and more concise and more efficient. Can you help? Also I will have several such boxes, not just one. Feel free to change/add/remove identifiers, I am looking for a better solution overall. `$(document).ready(function() { $("#closedRow").on('change', function() { if ($("#closedRow").val() != 0) $("#trRow").css('background-color', 'yellow'); else $("#trRow").css('background-color', 'white'); }) $("#serviceRow").on('change', function() { if ($("#serviceRow").val() != 0) $("#trRow2").css('background-color', 'yellow'); else $("#trRow2").css('background-color', 'white'); }) })` ` Closed: Show All Hide Closed Service: Show All Hide Service Another Service `

I've made a JavaScript, HTML and CSS version of the memory game 'Simon' from the 70s. The design of the board is not too impressive (I wanted to focus first on the JavaScript part) but I also appreciate feedback on it of course. If you want to see the game already in action, it's available here. `var computerMovements = []; var answers = []; var rounds = 0; //strict mode allows one mistake per round. false if 'relaxed' mode var strict = true; //in strict mode, there is no last chance var lastChance = false; var addColor = function(arr) { var colorsArray = ["green", "red", "yellow", "blue"]; return arr.push(colorsArray[Math.floor(Math.random() * colorsArray.length)]); }; var flashLights = function(arr) { var i = 0; var interval = setInterval(function() { $("#" + arr[i]).fadeTo("slow", 0).fadeTo("slow", 1); $("#sound-" + arr[i])[0].play(); i++; if (i >= arr.length) { clearInterval(interval); } }, 1500); }; var resetAnswers = function() { answers = []; }; var updateRounds = function() { rounds++; $("#show-rounds").html(rounds); }; var resetGame = function() { rounds = 0; computerMovements = []; if (strict === false) { lastChance = true; } resetAnswers(); }; var playerTurn = function() { //during the game we don't want the player to switch between strict and relaxed $("#mode").click(function() { return false; }); //winning condition if (rounds === 20) { alert("You, you, you're good you!"); resetGame(); } updateRounds(); addColor(computerMovements); flashLights(computerMovements); $(".button").off("click").on("click", function() { $("#sound-" + $(this).attr("id"))[0].play(); answers.push($(this).attr("id")); for (var i = 0; i `#container { background-color: gray; width: 160px; height: 160px; margin: 0 auto; text-align: center; text-align: justify; } #green { background-color: green; width: 70px; height: 70px; float: left; } #red {

Here is my solution for a fixed table header with scrollable body and aligning columns. The requirements I wanted to achieve were: - Fix `` while `` can scroll while the all the `` and `` cells of one column all have the same width - No fixed `width` - Pure `HTML`, `CSS`, `JS` - Bonus points for pure `CSS` solution What could still be improved: - Make the scroll bar as longer so there is no free area in the top right - Improve the `Javascript`, I'm sure it can be rewrote to be more efficient - Clean the code, especially the `Javascript` - Pure CSS solution, if possible I would also like to have general advice on my coding style, good or bad practices and maybe an evaluation of how efficient this code is. How good would it perform if the matrix size grows? Right now, I'm just happy that my code works in my case. :) You can find the matrix that needs to be tweaked here: JsFiddle The table in this example is from a match plan for last year for my sports team. `// jshint esversion: 6 // jshint browser: true // jshint devel: true const thElements = document.getElementsByTagName("th"); const tdElements = document.getElementsByTagName("td"); let width = []; let tempResult = 0; // calculate needed width for (let i = 0; i tdElements[i].offsetWidth) { // get inner width because thats what we will set tempResult = window.getComputedStyle(thElements[i], null) .getPropertyValue("width"); width[i] = `${tempResult.toString()}`; } else { // get inner width because thats what we will set tempResult = window.getComputedStyle(tdElements[i], null) .getPropertyValue("width"); width[i] = `${tempResult.toString()}`; } } // set column width for (let i = 0; i `/*container */ #club_plan { clear: both; overflow-x: auto; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } thead tr { position: relative; } tbody { display: block; max-height: 15

Me and my friend are trying to build a Connect4 game with a twist. The twist requires us to have a 7*7 board and to be always able to check all possibilities for a win for both players after each move. Currently, we are just filling the board with a random distribution of `0`,`1` and `2` (in the final game it will be `0` for empty, `1` for player 1, `2` for player 2) and then check if there are four of the same kind (even `0`) connected, which means someone wins. What I would like to be interested in: - Can this part of the `checkForWin` function be any cleaner? ``` if (winRow || winColumn || winDiagonal) { if (winRow && !winColumn && !winDiagonal) { document.getElementsByClassName("statusArea")[0].innerHTML = "WIN BY ROW"; } if (!winRow && winColumn && !winDiagonal) { document.getElementsByClassName("statusArea")[0].innerHTML = "WIN BY COLUMN"; } if (!winRow && !winColumn && winDiagonal) { document.getElementsByClassName("statusArea")[0].innerHTML = "WIN BY DIAGONAL"; } if (winRow && winColumn && !winDiagonal) { document.getElementsByClassName("statusArea")[0].innerHTML = "WIN BY ROW AND COLUMN"; } if (winRow && !winColumn && winDiagonal) { document.getElementsByClassName("statusArea")[0].innerHTML = "WIN BY ROW AND DIAGONAL"; } if (!winRow && winColumn && winDiagonal) { document.getElementsByClassName("statusArea")[0].innerHTML = "WIN BY COLUMN AND DIAGONAL"; } if (winRow && winColumn && winDiagonal) { document.getElementsByClassName("statusArea")[0].innerHTML = "WIN BY ROW, COLUMN AND DIAGONAL"; } } ``` - Some testing to check if the `checkForWin` function really always does what we want it to. I tried a lot of random distributions, but I'm just not sure if everything works out the right way. - I really had to mess around with the CSS until it looked like it does now. Please help me to clean this up. - General comments, style advice and hints f

I have created a very basic animated percentage bar with `HTML`, `CSS`, and `JS` the only problem is that I am trying to devise a way to also animate the increase and/or decrease of the percentage output to go along with an animated percentage bar. In the example below and in this JsFiddle I have successfully created that with the only problem being that it doesn't seem to be the most efficient or effective way of doing it. In the code snippet directly below I'm creating this animated effect by... - Setting `x` equal to setInterval - Capturing the width of percent bar on the left and removing the `px` from the end of the string. - Capturing the width of percent bar on the right and removing the `px` from the end of the string. - Displays the percent value for the left (blue) bar inside the tooltip that can be seen when hovered over. - Displays the percent value for the right (red) bar inside the tooltip that can be seen when hovered over. - Displays the percent value of the left (blue) bar below the percent bar. - Displays the percent value of the right (red) bar below the percent bar. - All of this code below will run every `64` Milliseconds. - This code will only run for `2000` Milliseconds which is the same amount of time that I have set the transition for the percent bars. Note: The whole point of the code below is to give the illusion that the percent values are increasing as either of the percent bars are increasing. In short, the goal is to make it seem more animated rather than the number all of a sudden seeing the number jump from one number to the next. There just has to be a better way of achieving the same effect (or better) rather than pulling data from the DOM every 64 Milliseconds. There are tons of real-time graph's out on the web that achieve the same effect but I can't figure out how so I came up with my own and don't really think that they do it this way either. Any ideas??? I would only like to use pure Javascript with no libraries su

In connection with a job application I have to progress the following task: Create a dynamic growing pyramid. The structure has to be sorted alphabetically (concerning the inserted values). It has to have the following controls: - Textbox for inserting texts (used by the blocks of the pyramid). - Button which adds the text to the list. Furthermore updates the pyramid. - Button which removes the last block of the pyramid. Furthermore updates the pyramid. You are allowed to use HTML, CSS and JavaScript. Here are screenshots for to demonstrate how it is meant: Here the code I've written: `(function() { var items = []; var addNewItem = document.querySelector('#add-new-item'); var removeLastItem = document.querySelector('#remove-last-item'); var textbox = document.querySelector('#content-new-item'); var pyramidPanel = document.querySelector('#pyramid-panel'); var colors = ['orange', 'blue', 'red', 'green']; function updateItems() { var textboxContent = textbox.value if (items.length { if (a.textboxContent > b.textboxContent) { return 1; } else if (a.textboxContent { item.color = colors[index % colors.length]; }); } function updateView() { items.forEach((item, index) => { let div = document.createElement('div'); let span = document.createElement('span'); let textNode = document.createTextNode(item.textboxContent); div.setAttribute('class', 'pyramid-item'); span.setAttribute('class', 'pyramid-content'); div.style.borderRight = '75px solid transparent'; div.style.borderBottom = `50px solid ${item.color}`; div.style.borderLeft = '75px solid transparent'; div.style.marginLeft = ((4 - index) * 75) + 'px'; div.style.width = (150 * index) + 'px'; span.appendChild(textNode); div.appendChild(span); pyramidPanel.appendChild(div); }); } function emptyPanel() { while (pyram

I am looking for someone to help me improve this code. It works great but can sometimes slow my browser down a lot when raindrops are at a high amount. ``` html { height: 100%; } body { background: #0D343A; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(13, 52, 58, 1)), to(#000000)); background: -moz-linear-gradient(top, rgba(13, 52, 58, 1) 0%, rgba(0, 0, 0, 1) 100%); overflow: hidden; } .drop { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(13, 52, 58, 1)), to(rgba(255, 255, 255, 0.6))); background: -moz-linear-gradient(top, rgba(13, 52, 58, 1) 0%, rgba(255, 255, 255, .6) 100%); width: 1px; height: 89px; position: absolute; bottom: 200px; -webkit-animation: fall .63s linear infinite; -moz-animation: fall .63s linear infinite; } /* animate the drops*/ @-webkit-keyframes fall { to { margin-top: 900px; } } @-moz-keyframes fall { to { margin-top: 900px; } } // number of drops created. var nbDrop = 1000; // function to generate a random number range. function randRange(minNum, maxNum) { return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum); } // function to generate drops function createRain() { for (i = 1; i '); $('#drop' + i).css('left', dropLeft); $('#drop' + i).css('top', dropTop); } } // Make it rain createRain(); ```

I'm trying to build a generic thing that will update a fixed menu button's color to either 'black' or 'white' depending on which contrasts better with the background color. I've got it working, but I want to optimize the code. I'm curious how I can improve organization. Am I optimally using ES6? Are there any opportunities to make the code more DRY? Codepen `/*jshint esversion: 6 */ /* ** Helper Functions */ const helperFunctions = { // Color contrast getContrastYIQ: function getContrastYIQ(rgb) { rgb = rgb.substring(4, rgb.length - 1) .replace(/ /g, '') .split(','); const yiq = ((rgb[0] * 299) + (rgb[1] * 587) + (rgb[2] * 114)) / 1000; return (yiq >= 128) ? 'black' : 'white'; }, // Get element position relative to viewport offsetTop: function offsetTop(elem) { const offset = { top: 0, left: 0 }; if (elem && elem.getBoundingClientRect) { // check if available const rect = elem.getBoundingClientRect(); offset.top = rect.top; offset.left = rect.left; } return offset.top; }, // DOM Manipulation addClass: function addClass(elem, classname) { if (classname) { if (elem.classList) elem.classList.add(classname); else elem.className += ' ' + classname; } }, removeClass: function removeClass(elem, classname) { if (classname) { if (elem.classList) elem.classList.remove(classname); else elem.className = elem.className.replace(new RegExp('(^|\\b)' + classname.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); } } }; /* ** Init */ const sections = document.querySelectorAll('section'); const sectionCollection = []; const menu = document.querySelector('.menu-icon'); const menuOffset = helperFunctions.offsetTop(menu); // Setting up section obejcts for (let i = 0; i 0) ? window.getComputedStyle(sections[i - 1], null).getPropertyValue('background-color') : this.backgroundColor; this.previousTextColor

I have an HTML list. The goal is that: - When an `li` is clicked, the `.my-list--selected` class will be applied. And, since the inner div also has a border-bottom, the `.border-bottom` class must be removed (or else it appears as though there is a 2px wide border along the bottom if both classes are applied). - When another `li` is clicked, the previously selected `li`'s `.my-list--selected` is removed and the `.border-bottom` class is reinstated (there can only be 1 '.my-list--selected' at a time). I've written the below code and it works, but it seems really messy and overly complicated to me. Is there a better way to go about achieving this goal? `$("li").click(function() { //Remove the my-list--selected class from any elements that already have it $('.my-list--selected').removeClass('my-list--selected'); //Add the .border-bottom class back to any element that is missing it $('.my-list--selected').addClass('border-bottom'); //Add the my-list--selected class to the clicked element $(this).addClass('my-list--selected'); //Remove the border-bottom class from the clicked element $(this).find('.border-bottom').removeClass('border-bottom'); });` `li div { padding: 0 10px; } .border-bottom { border-bottom: 1px solid #ccc; } .my-list--selected { border: 1px solid #ccc; }` ` - Content - Content - Content `