Questions tagged [dom]

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

Filter by
Sorted by
Tagged with
0
votes
4answers
231 views

Three clickable navigation elements, where only one should be active

I have three clickable <h1> elements in the nav bar of a static page I'm making as a practice project. I wrote code so when I click one, it lights up. Since ...
6
votes
2answers
9k views

Poker game in JavaScript

I am creating a Poker game using the follow hand precedence (winning hands in descending order): So if the player enters 5 cards: TH JH QH KH AH (i.e. 10Heart JackHeart QueenHeart KingHeart ...
2
votes
2answers
126 views

jQuery Tab Scroller

I've never had anyone review my code. I actually found full-time work as a web developer and in the interest of ensuring that I'm always improving, I'd like to see if I'm doing things the proper way. ...
2
votes
1answer
151 views

Hotel search engine UI

I ask for your help to improve the form I created, keeping in mind that I am not a great expert in JavaScript programming. I need to create a hotel search engine, with the possibility to choose the ...
2
votes
2answers
80 views

Counting quiz for children

I made a game for children. This game tests the ability to count (i.e. compare numbers based on magnitude). First you must select the age of the child in the upper menu, then you need to select blocks ...
3
votes
3answers
90 views

Date and time incrementation, using a fictional calendar / clock

I created a simple clock & calendar system using a fictional system: everything from the number of seconds in a minute, down to the number of months in a year could be different from our accepted ...
1
vote
5answers
4k views

Add and remove classes on resize

I'm just a bit confused and can not write or simplify a jQuery code, that adds or removes classes based on the viewport size. I'm pretty sure there's a simpler and more efficient way to write that ...
3
votes
1answer
879 views

Analog clock in React.js, rendered using CSS rotation

I am new to ReactJS and I am trying to write a component which emulates an analog clock. The second, minutes and hour div elements are transformed every second using an interval function. However, I ...
1
vote
0answers
292 views

Find delegated click handler for any DOM Node in the event path

I've got this method in a class that searches the graph of DOM nodes above an element for a click handler attached with Blaze or ...
1
vote
1answer
138 views

Making a slideshow in JavaScript/jQuery

I am new to JavaScript and jQuery, and I would like to know what can be improved of the code in this slideshow. ...
2
votes
0answers
39 views

Simple, pixel independent, CSS Grid resizing with no third party libraries

I wanted to see if I could implement codepen-like or jsfiddle-like window resizing by using simple boxes and CSS grid without any third party libraries. Live version can be found here: https://...
6
votes
2answers
129 views

Starship Comparison App with ES6 Generators and the Star Wars API

Assignment Description: Make a web application that compares starships based upon the Star Wars API. There shall be: A label "Select two Starships from the dropdown lists to compare". Two dropdown-...
4
votes
2answers
180 views

Simple JavaScript library for DOM interactions

I got this pretty interesting homework assignment, which was to finish off a very simple Javascript library. I couldn't use jQuery. First, I will show you the raw piece of code that I received, then ...
0
votes
3answers
609 views

jQuery function to create a container div with some content

I just recently started with Javascript and jQuery. My background is in Python. I would be more than happy to get some feedback if this coding style of mine is optimal, or if in JS people generally ...
1
vote
2answers
60 views

Function that shows markers all at once or with a delay

I have some markers on an image. At some point all these markers are inactive (i.e. a class name is added to the element, which hides them) and need to be shown ...
0
votes
1answer
34 views

Dynamically resizing panels based on browser window size

I've just finished building my responsive carousel currently trying to optimize my code to make it more efficient. I've created a number of if conditions in my ...
2
votes
1answer
56 views

DOM-Manipulating extension for grade calculation

I'm currently working on a Chrome Extension that uses jQuery to traverse and manipulate the DOM in order to read and write hypothetical grade calculations to a gradebook page. I already have a GitHub ...
1
vote
1answer
2k views

Insert a table row with text in cells when a button is clicked

I made a function to dynamically create this table and a button with a function to display texts inside the table shown as a message. ...
3
votes
2answers
11k views

Getting images and saving them to localstorage

The code in this project accepts an image URL and creates an <img> tag dynamically, using the image URL as the src attribute value. The image *name *and URL ...
2
votes
1answer
71 views

Mutually exclusive expandable panels (needs to work in IE9 and above)

I have a function which essentially opens and closes content associated to a panel. Only one panel can be open at any time. Here is my JavaScript, along with a typical HTML sample that it could work ...
0
votes
1answer
1k views

Pure JS multi-slide carousel

On our home page we need simple multi-slide carousel. It is our highest traffic page, so we decided to remove all libraries (including jQuery) in order to increase page speed. Functionality we trying ...
5
votes
3answers
4k views

Showing “open” or “closed” based on the current time

I'm using this code to have a site show either "Open" or "Closed" depending on what the current time is. I'm a junior developer and I want to show this to my boss but one of the ...
5
votes
1answer
1k views

Reorder columns in an HTML form

I have the following HTML structure for a form (simplified): ...
4
votes
2answers
171 views

JavaScript component to display ephemeral notifications

I would like to improve my code and organization of JS files so I'm wondering if you guys could tell me what I could do better. I've included a small but typical example of how I often use components. ...
6
votes
1answer
174 views

To do app using VanillaJS

I've already written simple to do app using VanillaJS. Can you make any code review - JS? It also contain basic validation, if user type some thing two times. ...
6
votes
1answer
2k views

Pig Dice Game: Luck game to get to 100 points

I have a dice game called Pig to play (a simple google search will show rules, they are included in my .js file as well). I am new to JavaScript and the main goal of this code review is to give me an ...
3
votes
1answer
11k views

jQuery code to total the items in a shopping cart

I implemented a shopping cart with asp.net and jquery on my website, and here is my js code which calculates amount and total sum on client side: ...
2
votes
2answers
170 views

List component using plain JS

beginner web dev here. I created a custom list component (with edit feature) in plain JS/HTML. I have few questions on which I would like to get an answer (besides the normal feedback that you folks ...
0
votes
1answer
1k views

Small React app with multiple components

One of my first attempt in React therefore I am sure there will bel plenty of non-sense of coding that it the main reason to put here for learning more from the review by intelligent users Is the ...
0
votes
1answer
159 views

My first JavaScript calendar project

I have just finished writing my first Javascript project, a calendar, and I want to find out if my code is readable for other developers. In this version I used JS only, I didn't use any libraries. ...
5
votes
1answer
347 views

Simple Calculate Game

I am a beginner in programming and I wrote a simple game in Javascript in which you have to solve exercises. Division exercises have to be solved without remainder. If you have tips for improving the ...
3
votes
1answer
2k views

Simple ES6 TODO list

This is how my app looks like: I can add and remove tasks, mark them as complete, move them up and down on a list, and filter them. I have few questions about some parts of my code that I'm pasting ...
1
vote
2answers
684 views

Adding and Deleting in ES6 Javascript Alone

I need help in making this as short as possible and it should follow the latest ES6 standards. It it already 100% working. But I need help because i want to follow the best practices in using ES6. The ...
7
votes
1answer
24k views

Shopping cart in pure JavaScript

I need help in making this shopping cart adhere to the W3C rules. This is already 100% functioning. I just need help in making this code as clean and as short as possible. I want it in pure ...
12
votes
3answers
11k views

Evaluating an XPath with document.evaluate() to get an array of nodes

The Problem Statement: Filter all nodes with an existing attribute that starts with a specific string (temp for example purposes). Print an array of node string ...
1
vote
1answer
68 views

Objects using jQuery to maintain a playlist of shows

This is my first attempt at using OOP JavaScript in my work. I know the concepts but implementation is more complicated than I thought. Now the code is a mixture of several things (JavaScript/jQuery). ...
2
votes
2answers
75 views

Enabling or disabling buttons on certain events

I need to run the following checks in two occasions: When a certain modal is first shown or clicked, When one of two inputs is filled. How can I remove redundancy in the following code? ...
4
votes
2answers
110 views

Individual collapsible areas with accessibility in mind

I've been learning Javascript by creating reusable individually collapsible areas (not using jQuery) and I was wondering if someone could review it and let me know if there is anything they would do ...
4
votes
1answer
559 views

JavaScript class that generates HTML form with validation

I'm trying to create a complex application—Table generator. And the first part if it is form that lets user input data source. As I figure source should be an absolute http url, so I have to give user ...
2
votes
1answer
524 views

Simulated chat bot

I am creating a very basic simulated chat bot/dialogue tree. I have the whole conversation mapped based on what a user selects. However, I am doing this by storing all of the conversation in ...
4
votes
1answer
83 views

Pomodoro timer module

I have been learning javascript for some time and have just finished my first piece of code that not only actually does something, but is also longer than a few lines of code. It most likely is pretty ...
5
votes
1answer
68 views

Building a table from the result of an AJAX call

I am looping through content coming from the database using an ajax call. Then I'm building a table using a for loop. Is there a faster way to build the table using the data from the database or is ...
3
votes
0answers
61 views

Remove pre-loader animations when all assets on page become available

This code starts when the page loads and when all assets become available, it removes pre-loader animation and page becomes visible. I know some functions has code repetition, but it can await ...
4
votes
0answers
407 views

Recursive function to compare XML files using MSXML DOM

I have put together this function which compares two XMLs. On debugging, I found out that there are lot of useless loops which might cause performance problems for me if the files to compare are very ...
1
vote
3answers
137 views

Ensure that all `h2` tags have a `span` inserted

I'm running these on page load to ensure that all h2 tags have a span inserted (it's a large WordPress site that needs to have ...
5
votes
1answer
4k views

Moving items between two multi-select lists

I am learning object oriented JavaScript and come up with below exercise. There are two multi-select lists, one is source and other is target. User can move the item from source to target and vice ...
4
votes
2answers
2k views

Animating the percent of a “percentage bar” during the transition

I have created a very basic animated percentage bar with HTML, CSS, and JS the only problem ...
3
votes
3answers
48k views

Create multiple divs inside a containing div

The below function is used to create multiple content division elements (i.e. <div>) inside a containing <div>. The ...
0
votes
1answer
241 views

Extracting the SKU and description of products from an invoice by querying the DOM

I have a site where a person can buy something. This site is built on a platform that allows any person to build a site without coding knowledge. One of the features of this platform, is that after ...
8
votes
2answers
155 views

Functional way to have two toggles that turn each other off

I have two sets of toggles that need to "uncheck" each other. This is my current solution which is working. Can it somehow get more functional/elegant? ...

1 2 3
4
5
8